Question

我想做的是遍历我的媒体查询和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 Map静态编码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 ....
}

使用sass中的列动态创建断点

CSS

0 个答案: