SCSS网格：行中的列数更多，然后是最大边距问题

Question

我有一个自己制作的网格系统，最多支持12列。但我可以在这些变量中改变它：

$column-count: 12;
$row-max-width: 1024px;

$gutter-width-px: 10px !default;
$gutter-width-procent: percentage($gutter-width-px / $row-max-width);

这是计算尺寸的方式：

@function calculate-one-column() {
  $a: 100%;
  @if ($gutter-width-px > 0px) {
    $a: ($a - ($gutter-width-procent * ($column-count - 1)));
  }
  @return $a / $column-count;
}

@function calculate-each-gutter() {
  @if ($gutter-width-px > 0px) {
    @return $gutter-width-procent;
  }
  @return 0;
}

@function calculate-function($function, $size, $first-child: false, $responsive: false) {
  $each-column: calculate-one-column() * $size;
  $each-gutter: calculate-each-gutter() * ($size - 1);
  @if ($function == 'size') {
    @return $each-column + $each-gutter;

  } @else if ($function == 'offset' and $first-child == false) and ($responsive == false) {
    @return $each-column + $each-gutter + ($gutter-width-procent * 1.5);

  } @else if ($function == 'push' or $function == 'pull') and ($responsive == false) or ($function == 'offset' and $first-child == true) {
    @return $each-column + $each-gutter + $gutter-width-procent;

  } @else if($function == 'offset' or 'push' or 'pull') and ($responsive == true)  {
    @return auto !important;
  }
}

@mixin make-grid-sizes() {
  @for $index from 1 through $column-count {
    &.#{$column-size}-#{$index} {
      width: calculate-function('size', $index);
    }
  }
}

12中包含size-1列的行的HTML标记如下所示：

<div class="row">
    <div class="column size-1">...</div>
    <div class="column size-1">...</div>
    <div class="column size-1">...</div>
    <div class="column size-1">...</div>
    <div class="column size-1">...</div>
    <div class="column size-1">...</div>
    <div class="column size-1">...</div>
    <div class="column size-1">...</div>
    <div class="column size-1">...</div>
    <div class="column size-1">...</div>
    <div class="column size-1">...</div>
    <div class="column size-1">...</div>
</div>

当然，我也可以这样做：

<div class="row">
    <div class="column size-2">...</div>
    <div class="column size-2">...</div>
    <div class="column size-2">...</div>
    <div class="column size-2">...</div>
    <div class="column size-2">...</div>
    <div class="column size-2">...</div>
</div>

或其他组合。

首先，它看起来像这样（size-1的12列，这是1行）：

我必须给:first-child margin-left 0 :last-child和margin-right 0 column。

这是因为每个margin在$gutter-width-procent / 2的每一侧都有一个margin: 0 #{$gutter-width-procent / 2}; ：

12

然后看起来像这样（这是1行）：

这是完美的，但现在只需将24列放在一行就可以了。

---

现在，当我连续添加size-1列row列时，它看起来像这样（仍然是margin-right}：

我能够通过向它添加这些CSS规则来解决这个问题：

（每个最后一列0 margin-left，每个第一列0 &:first-child, &:nth-of-type(#{$column-count}n + 1) { margin-left: 0; } &:last-child, &:nth-of-type(#{$column-count}n) { margin-right: 0; }

column size-1

但这仅适用于row。

问题

我如何才能使margin-left HTML元素的“行”中的每个第一列都有0 margin-right。

最后一列也是如此，但0为{{1}}。

Demo here

Answer 1

一种解决方案是向.row添加负边距：

.row {
  margin: 0 -#{$gutter-width-procent / 2};
}

然后你可以删除所有&:first/last/nth-child - 选择器，因为col gutters只会＆＃34; slip＆＃34;进入负边际空间。

Updated JS-fiddle

我不得不更改宽度值（并未全部更改）以考虑由负边距引起的添加宽度。对我来说有点不熟悉，因为我使用Susy来处理所有这些事情。但是你需要稍微改变计算宽度的功能。这就是我计算的方式：

$column-count: 12;
$row-max-width: 1024px;

$gutter-width-px: 10px !default;

@function col($cols: 1) {
  $row-width-neg-margin-width: $row-max-width + $gutter-width-px;
  @return ( ( $row-width-neg-margin-width / ($column-count / $cols) ) - $gutter-width-px ) / $row-width-neg-margin-width * 100%;
}