SASS计算网格柱宽

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

不太确定，这是否解决了您的问题，但我不会创建这样的网格排水沟。如果您使用“方框大小”、父列上的负值和每列的填充，您可以轻松地创建它们。因此，您的(“伪”)-HTML看起来可能是：

.parent
    .column
    .column
    .column

你的CSS是这样的：

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

您创建列宽度的SASS函数也可以简化。我制作了一个钢笔，向你展示了一种解决排水沟问题的方法。

这个SASS函数只用于测试，不检查副本(.size1-2 (50%)和.size2-4)和其他东西。

Answer 2

我可能在这里搞错了，但是如果你用box-sizing: border-box;和填充来填充你的排水沟，那么你就不用做任何计算了。关于边框这里有一个很棒的帖子。