@mixin在@for循环中带有$ variables作为params SASS SCSS

Question

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

我的代码和循环的挑战：

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

的混入（里面有什么不事项）

@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循环这些变化：-叠加3

。叠加-1 。叠加-2 ...等等

但是， @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)); 
     } 
    } 
}