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