Question

对于SASS SCSS爱好者，我有一个非常具有挑战性的代码。

我的代码和循环挑战：

@for $i from 1 through 8 {
    &.-overlay-#{$i} {
        @include box-shadow($brand-color-#{$i});
    }
}

mixin（内部无关紧要）

@mixin box-shadow($color: $black) {
    box-shadow: inset 194px -7px 200px 0 rgba($color, .42);
}

颜色列表（我有8种颜色）

$brand-color-1: red;
$brand-color-2: blue;
$brand-color-3: green; ... so on

$brand-color-XX变量传递给@mixin

我想要做的是，使用@for循环创建这些变体：

.-覆盖-1 。叠加-2- 。-overlay-3 ......等等

但是@for目前还没有工作，我在这里缺少什么？

此致

中号

Answer 1

@for正在运行，但您试图以一种他们不打算使用的方式使用变量。您不能组合2个SASS / SCSS变量来制作一个。您没有名为$brand-color-的变量，因此编译器不知道如何处理该变量。但是您可以通过列表获得所需的结果。

DEMO

$brand-color-1: red;
$brand-color-2: blue;
$brand-color-3: green;

$colors: $brand-color-1, $brand-color-2, $brand-color-3;

@mixin box-shadow($color: $black) {
    box-shadow: inset 194px -7px 200px 0 rgba($color, .42);
}

@for $i from 1 through length($colors) {
    .-overlay-#{$i} {
        @include box-shadow(nth($colors, $i));
    }
}

你说你想要的结果是.-overlay-1 .-overlay-2 .-overlay-3 ...so on，所以我不确定你对&做了些什么。 &用于指代父类。如果你想嵌套你创建的类，你也可以这样做......

.cool {
    @for $i from 1 through length($colors) {
        .-overlay-#{$i} {
            @include box-shadow(nth($colors, $i));
        }
    }
}

...或者将它们放在与父母相同的水平......

.cool {
  @for $i from 1 through length($colors) {
      &.-overlay-#{$i} {
          @include box-shadow(nth($colors, $i));
      }
  }
}

...或创建一个不同的类

.cool {
  @for $i from 1 through length($colors) {
      &-overlay-#{$i} {
          @include box-shadow(nth($colors, $i));
      }
  }
}

@mixin在@for循环SASS SCSS中使用$变量作为参数

1 个答案: