SASS网格系统外部填充

Question

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

我已将padding-left和padding-right都设置为20px，这是沟槽宽度（每列之间的空间）。

一切正常，但column中的第一个和最后一个row设置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

你可以将这些额外的行添加到你的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

Answer 2

为什么不在“.row”左侧和右侧添加20px的负边距？

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