css - 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

我可能在这里得到了错误的一端，但如果你使用 box-sizing: border-box; 和填充你的排水沟，那么你就不必做任何计算。有一篇关于边界框的好文章 here .