0

假设我们有以下标记：

<section class="wrapper">
    <div>column1</div>
    <div>column2</div>
    <div>column3</div>
    <div>column4</div>
</section>

我需要一个 mixin 来设置列的宽度，并将它们浮动到左边。一个简单的四列网格。这是我到目前为止提出的。

@mixin grid($columns: 2, $tag: "div") {
    #{$tag} {
        width: 100% / $columns;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        float: left;
    }
    &:after {
        display: table;
        content: " ";
        clear: both;
        *zoom: 1;
    }
}

我的问题是：有没有更好的方法来做到这一点，我错过了什么。

4

1 回答 1

1

你可能想看看singularitygs！

使用这个 sass 扩展，您可以编写

div {
    @include grid-span(1,1,4,$output-style: 'float');
}

的参数grid-span是(with, startpos, context, options)。所有数字都将转换为基于比率的宽度。上面的例子可以解读为：

width 1 at position 1 in a grid-context of 4
=> width: 25%; margin-left: 0;

（ouput-style: 'float'需要，因为您的目标是多个 div）

或者您可以先定义基本网格，然后省略上下文：

$grids: 4;

div {
    @include grid-span(1,1,$output-style: 'float');
}

你甚至可以更进一步，使用breakpoints不同的网格来适应不同的窗口大小：

$grids: 4; // base grid (mobile first)
$grids: add-grid(12 at 980px); // 12-grid for everything above 980px
$output-style: 'float'; // set the output-style globally
div {
    @include grid-span(2,1); // => 50%
    @include breakpoint(980px) {
        @include grid-span(4,1); => 33.3333%
    }
}

Singularity 有更多可能，所以请查看他们的wiki！

于 2013-08-21T14:42:37.117 回答