Question

假设我们有以下标记：

<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;
    }
}

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

Answer 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！

SASS mixin用于网格布局

1 个答案: