Sass 计算列宽百分比

Question

我正在尝试用sass制作自己的小列网格，但我无法解决这个问题。

这就是我到目前为止提出的，但这不是正确的解决方案。我得到了这样的干净网格，但问题是我在每一行中删除了额外的百分比。

我删除了每列宽度上 1%（在本例中）的gutter_width，并使用我的gutter_width作为左边距来替换房间。因此，对于每一列，我删除了一个百分比并将其添加为边距，从而创建了装订线。当我删除行中第一个孩子的边距时，问题就出现了，这给我留下了 99% 的行。

有人可以帮我解决这个问题吗？或者也许建议一个更好的方法。

$container_width: 970px; // Main container width
$gutter_width: 1%;
$columns: 12; // Twelve columns

/*  #Calculate the columnwidths  */
/*  Calculate the width of a single column and multiple it by columncount
================================================== */
@for $i from 1 through $columns {
    .column-#{$i} {
        width: ((100% / $columns) * $i) - $gutter_width;
    }
}
.container {
    max-width: $container_width;
    margin: 0 auto;
}
.row {
    width: 100%;
    margin: 1em 0;
    @include pie-clearfix;
}
// Select all element that contains class 'column'
[class*="column"] {
    float: left;
    margin-left: $gutter_width;
    &:first-child {
        margin-left: 0;
    }
}

Answer 1

应该

比列少一个装订线 - 无论是在上下文中还是在跨度宽度中。正确的数学实际上是：

// the width of a single column has to account for "$columns - 1" gutters.
$column_width: (100% - $gutter_width * ($columns - 1)) / $columns;
@for $i from 1 through $columns {
  .column-#{$i} {
    the width of a span should cover "$i" columns, plus "$i - 1" gutters
    width: $column-width * $i + $gutter_width * ($i -1);
  }
}

如果你想将任何网格跨度

嵌套在其他网格跨度中，像这样的类会创建一个相当脆弱的系统，但它应该涵盖基础知识。一旦你使用了像 Sass 这样的预处理器，我建议完全抛弃.column-x类，只使用 mixins。

Answer 2

因为您已经从第一个子项中删除了 $gutter_width，所以您需要将其再次添加到最后一个子项中。一种方法可能是将其放在循环中：

&:last-of-type{
   width: (100% / $columns) * $i;
}

这样，如果列是最后一个元素，则使用额外的 1% 重新计算宽度。如果你想要旧的浏览器支持，只需用一个名为.last-column或其他东西的实用程序类替换它。