Question

我编写了这段代码来计算网格系统的列宽：

@mixin calc-width($index, $type) {
  $column-calculation: (100% - ($gutter-width-procent * ($column-count - 1))) / $column-count;
  $column-width: ($column-calculation * $index);
  $gutter: ($gutter-width-procent * ($index - 1));
  @if ($index > 0) {
    @if ($type != 'width') {
      #{$type}: $column-width + $gutter + $gutter-width-procent;
    } @else {
      #{$type}: $column-width + $gutter;
    }
  }
}

我在这样的不同函数中调用它：

  @for $index from 1 through $column-count {
    &.size-#{$index} {
      @include calc-width($index, 'width');
    }
  }

变量为：

$column-count: 12 !default; //12
$row-max-width: 1024;

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

我喜欢这个系统。但有一件事似乎不正确......

我可以用另一种方式做这一行，然后从100％减去吗？

$column-calculation: (100% - ($gutter-width-procent * ($column-count - 1))) / $column-count;

Answer 1

我可能会在这里得到错误的结果，但是如果你使用box-sizing: border-box;并填充你的排水沟那么你就不必进行任何计算。关于边框here的帖子很棒。

Answer 2

不确定，如果这可以解决您的问题，但我不会创建这样的网格排水沟。如果使用＆＃34; box-sizing＆＃34;，父级的负边距和每列的填充，您可以轻松创建它们。所以你的（＆＃34;伪＆＃34;） - HTML看起来像：

.parent
    .column
    .column
    .column

你的CSS就是这样：

.parent {
    margin-left: -GUTTER;
}
.child {
    padding-left: GUTTER;
}

您可以简化用于创建列宽度的SASS功能。我做了一个pen来向你展示解决你的阴沟问题的一种方法。

此SASS功能仅用于测试，不会检查重复项（.size1-2（50％）和.size2-4）以及其他内容。

SASS计算网格的列宽

2 个答案: