Question

问题

我现在正在泡菜中。我需要在Sass循环中对选择器进行分组。我尝试过很多不同的方法，例如：

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）来实现以下目标：

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

如果你是萨斯神，那么请告诉我这里要做什么。如果这是元语言的固有限制，那么请让我知道这一点！

考虑

我不能使用mixin之外的任何东西来实现这一点，因为函数应该用在属性值上。另一方面，Mixins允许生成整个代码块。

Answer 1

保持简单，士兵！

%foo {
  foo: bar; }

@for $i from 1 through 10 {
  .offset-by-#{$i} {
    @extend %foo; }}

UPD 您也可以使用此方法设置各种样式：

%foo {
  foo: bar; }

@for $i from 1 through 10 {
  .offset-by-#{$i} {
    @extend %foo;
    margin-left: 50px * $i; }}

这导致以下CSS：

.offset-by-1, .offset-by-2, .offset-by-3, .offset-by-4, .offset-by-5, .offset-by-6, .offset-by-7, .offset-by-8, .offset-by-9, .offset-by-10 {
  foo: bar; }

.offset-by-1 {
  margin-left: 50px; }

.offset-by-2 {
  margin-left: 100px; }

.offset-by-3 {
  margin-left: 150px; }

.offset-by-4 {
  margin-left: 200px; }

.offset-by-5 {
  margin-left: 250px; }

.offset-by-6 {
  margin-left: 300px; }

.offset-by-7 {
  margin-left: 350px; }

.offset-by-8 {
  margin-left: 400px; }

.offset-by-9 {
  margin-left: 450px; }

.offset-by-10 {
  margin-left: 500px; }

Answer 2

你有没有试过这样的事情：

@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将循环内部的选择器分组

问题

考虑

2 个答案: