SASS 网格系统外填充

Question

我在 SASS 中做了这个自己的流体网格系统，但是有一个问题。

我已将padding-left 和padding-right 都设置为20px，即装订线宽度（每列之间的间距）。

这一切都很好，但是row 中的第一个和最后一个column 也在外侧设置了padding。我想防止这种情况发生，但我不知道我必须为此进行什么计算。

网格目前看起来是这样的：（红色间距是我要删除的）

系统代码如下：

@import "../../mixins/cross-browser-elements/_box";

$column-count: 12 !default;
$gutter-width-px: 20px !default;
    
@function calculate-column-width($index) {
  @if ($index > 0) {
    @return percentage($index / $column-count);
  }
}

.row {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 20px;

  > .column {
    float: left;
    min-height: 1px;
    padding-left: ($gutter-width-px / 2);
    padding-right: ($gutter-width-px / 2);
    @include box-sizing(border-box);


    @for $index from 1 through $column-count {
      &.size-#{$index} {
        width: calculate-column-width($index);
      }
    }
  }

}

我尝试的只是添加了这段代码：

&:first-child {
  padding-left: 0;
}

&:last-child {
  padding-right: 0;
}

这段代码下

> .column {
    ......

但这只是使该行中的第一列和最后一列在左侧和右侧更大一些。

Answer 1

为什么不在“.row”的左右两边加上20px的负边距？

.row {
  margin: 0 -20px 20px;
  ...
}

Answer 2

您可以将这些额外的行添加到您的 mixin 中：

   ...
    @for $index from 1 through $column-count {
          &.size-#{$index} {
            width: calculate-column-width($index);

            &:nth-child(#{$column-count}n) { // Clear every last item padding-right
              padding-right: 0;
            }

            &:nth-child(1) { // Clear every first item padding-left
              padding-left: 0;
            }
          }
        }
...

一个例子：http://sassmeister.com/gist/da6c1a341d289b4f3b67