ループ内のsass変数を値なしのセレクタとして渡します

Question

私はmixinを使用して、すでに確立されているセレクタに加えて、必要に応じて追加のセレクタをパラメータとして渡すことができます。しかし、ここではエラーが発生しています。あなたが各項目に値を渡さずにループの中で変数を使うことができない限り、私は何が欠けているのか分かりません。

@mixin light-section-text($selectors: null) { 

    @if ($selectors) { 
    @for $i from 1 through length($selectors) { 
     #{nth($selectors, $i)}, 
    } 
    } 
    p, 
    address, 
    li { 
    color: $white; 
    } 
} 

この場合@include light-section-text("body", "strong", "strong a");の所望の出力は次のようになります。それは$セレクタが最初にする原因となるよう

body, 
strong, 
strong a, 
p, 
address, 
li { 
    color: #fff; } 

Answer 1

まず、あなたは直接ミックスイン関数にセレクタリストを渡すことはできません文字列。したがって、まずリスト変数を宣言し、その変数を関数に渡す必要があります。

第2に、@extendと%文字を使用するSassの提供するPlaceholders機能を使用するだけです。

%color{ 
    color: white; 
} 
@mixin light-section-text($selectors: null) { 

    @if ($selectors) { 
     @for $i from 1 through length($selectors) { 
     #{nth($selectors, $i)}{ 
      @extend %color; 
     } 
     } 
    } 
    p, 
    address, 
    li { 
    @extend %color; 
    } 
} 
$list-variable: "body", "strong", "strong a"; 

@include light-section-text($list-variable); 

別の方法

あなたも、この作業だけではSASSプレースホルダで扱うことができるようミックスイン機能を使用する必要はありません。

$white : white; 

%color{ 
    color: $white; 
} 
$list-variable: "body", "strong", "strong a", "p", "address", "li"; 

@each $item in $list-variable { 
    #{$item} { 
     @extend %color; 
    } 
}