7

変数のグローバル値を定義してから、特定のセレクターに対してそれをオーバーライドするとします。SASSのドキュメントによると、これは可能であるはずです。

変数は、それらが定義されているネストされたセレクターのレベル内でのみ使用できます。ネストされたセレクターの外部で定義されている場合は、どこでも使用できます。

次に、ロジックは、の値としての「緑」と「赤」$text-colorはそれぞれのネストされたセレクター内でのみ使用可能であり、$text-color内などの他の場所で呼び出された場合は「青」の値をとると述べます.foo。 

$text-color: blue;

.green {
    $text-color: green;
    color: $text-color;
}

.red {
    $text-color: red;
    color: $text-color;
}

.foo {
    color: $text-color;
}

ただし、これは当てはまりません。上記のSASSは次のようにコンパイルされます。

.green {
    color: green;
}

.red {
    color: red;
}

.foo {
    color: red;
}

これを理解する助けは、まあ、役に立ちます。

4

2 に答える 2

12

これは古い質問ですが、記録として、バージョン3.4.0以降、！globalフラグでマークされていない限り、変数はブロックスコープになりました。

変更ログから：

ドキュメントのトップレベルにないすべての変数の割り当ては、デフォルトでローカルになりました。同じ名前のグローバル変数がある場合、！globalフラグが使用されない限り、その変数は上書きされません。たとえば、$ var：value！globalは$varにグローバルに割り当てます。 この動作は、 feature-exists（global-variable-shadowing）
を使用して検出できます。

これはこれを意味しますscss：

$color: red;

.sel {
  $color: green;
  color: $color;
}

.sel2 {
  color: $color;
}

次を生成しますcss：

.sel {
  color: green;
}

.sel2 {
  color: red;
}
于 2015-02-10T21:04:39.450 に答える
9

これは、変数をグローバルに割り当てると、その変数へのそれ以降のすべての割り当てもグローバルに行われるためです。その後ローカルにしたい場合は、$local-text-color: $text-color;それを実行してからcolor: $local-text-color;

于 2012-10-30T15:30:36.543 に答える