0

我正在尝试用 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;
    }
}
4

2 回答 2

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。

于 2013-09-17T04:02:41.387 回答
0

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

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

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

于 2013-09-16T22:01:28.373 回答