使用Sass在循环内将选择器分组

本文介绍了使用Sass在循环内将选择器分组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我现在正在泡菜.我需要在Sass循环内对选择器进行分组.我尝试了许多不同的方法来做到这一点，例如:

I'm currently in a pickle. I need to group selectors inside of a Sass loop. I've tried many different ways to go about doing this such as:

body {
    $store: null;
    @for $i from 1 through 10 {
        $store: append($store, ".offset-by-#{$i}", comma);
    }
    // produces content: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
    @each $j in $store {
        $store: unquote($j);
    }
    // produces .offset-by-10
}

我要使用纯Sass(无Ruby)尝试完成的操作如下:

What I'm trying to accomplish using pure Sass (no Ruby) is the following:

.offset-by-1,
.offset-by-2,
.offset-by-3,
...
.offset-by-10 { foo: bar; }

如果您是萨斯神，那么请给我一个在这里做什么的想法.如果这是元语言的固有限制，那么也请让我知道！

If you are a Sass god then please give me an idea of what to do here. If this is an inherent limitation of the meta-language then let me know about that too!

我只能使用mixin来完成此操作，因为应该在属性值上使用函数.另一方面，Mixins允许产生整个代码块.

I can't use anything other than a mixin to accomplish this because functions are expected to be used on a property value. Mixins, on the other hand allow the production of entire blocks of code.

推荐答案

您是否尝试过以下方法:

Have you tried something like this:

@mixin createNumbered($num, $className){
    @for $i from 1 through $num {
        .#{$className}-#{$i} {
            @content;
        }
    }
}

@include createNumbered(10, 'foo-bar'){
    color: white;
}

已更新:

@mixin createNumbered($num, $className){
    $foo : '';
    @for $i from 1 through $num {
        $foo : $foo + '.' + $className + '-' + $i + ', ';
    }
    #{$foo} {
        @content;
    }
}

@include createNumbered(10, 'foo-bar'){
    color: white;
}

这篇关于使用Sass在循环内将选择器分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

mixins