Question

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

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

我正在删除每列宽度1％（在这种情况下）的gutter_width，并使用我的gutter_width作为margin-left来替换房间。因此，对于每个列，我将删除一个百分比并将其添加为边距，从而创建排水沟。当我删除行中第一个孩子的边距时，问题就出现了，这个行留下了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的实用程序类。

Sass计算列宽百分比

2 个答案: