@mixin @forループ内の$変数を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ループでこれらのバリエーションを作成し、あるオーバーレイ-1。オーバーレイ-2。オーバーレイ-3。 @forは現時点では動作していませんが、私はここで何が欠けていますか？

よろしく

M

Answer 1

@forが働いていたが、あなたはそれらが使用されることを意図していない方法で変数を使用しようとしていました。 2つのSASS/SCSS変数を組み合わせて1つにすることはできません。 $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)); 
     } 
    } 
}