1

我想做的是遍历我的媒体查询和 sass 中的列。例如，我使用以下代码生成了列类：

$__grid--columns: 12;
$__grid--breakpoints: (
    small:0,
    medium:667px,
    large:1024px,
    xlarge:1200px
);
$__grid--gutters: (
    small:30px,
    medium:30px,
    large:30px
);

@each $key, $value in $__grid--breakpoints {
    @for $i from 1 through $__grid--columns {
        &.#{$key}-#{$i} {
            width: ( (100% / $__grid--columns) * $i);
        }
    }
}

Codepen 链接也在这里：https ://codepen.io/Jesders88/project/editor/bd9e637b08b6c1c907c7fbe8211192f9

我想使用上面的 sass 地图，它工作正常。我挂断的地方是媒体查询。我不想为我的 sass 映射静态编码 4 个 if 语句。它需要动态完成。基本上它归结为在这种情况下我想cell-small通过一组课程。cell-xlarge如果我添加断点，mixin 需要适应它。基本上它需要类似于引导程序或基础。以下是我的想法。

<div class="cell cell-sm-12 cell-lg-4">
    @content Goes Here.
</div>

基本上我需要一种在小断点处中断的方法来制作 12 列，并且在大屏幕上只有 4 列。同样，我不想循环通过断点而不得不静态地说

@if(breakpoint == sm){ do this }

sass 映射将是断点的定义。

如果这没有意义，请随时提出问题。另外，如果您愿意，请随时分叉我的笔并进行编辑。谢谢您的帮助。

我想要的示例

<div class="container">
    <div class="row gutter">
        <div class="cell small-12 large-4">
            Content Goes HERE
        </div>
    </div>
</div>

CSS

.gutter {
 > .cell { margin-left://GENERATED FROM SASS MAP }
 > .cell .small-1 { //GENERATED WIDTH }
 > .cell .small-2 { //GENERATED WIDTH }
 > .cell .small-3 { //GENERATED WIDTH }
 > .cell .small-4 { //GENERATED WIDTH }
 > .cell .small-5 { //GENERATED WIDTH }
 > .cell .small-6 { //GENERATED WIDTH }
 > .cell .large-1 { //GENERATED WIDTH }
 > .cell .large-2 { //GENERATED WIDTH }
 > .cell .large-3 { //GENERATED WIDTH }
 > .cell .large-4 { //GENERATED WIDTH }
 > .cell .large-5 { //GENERATED WIDTH }
 > .cell .large-6 { //GENERATED WIDTH }
     //REST OF THE VALUES ....
}
4

0 回答 0