10

私はスタイルシートをLESSからSCSSに変換している最中であり、可変スコープで見ているものについて混乱しています。簡単な例で再現:

$my-color: #000;

#logo {
    $my-color: #555;
    color: $my-color;
}

a {
    color: $my-color;
}

次のCSSに変換します。

#logo {
    color: #555555;
}

a {
    color: #555555;
}

LESSでの同等の構成により、スコープ内の変数宣言がより一般的な宣言をオーバーライドするため、a color値は次のようになりますが、そのスコープ内でのみです。変数スコープはSCSSのように機能しませんか?同じことを達成する方法はありますか?#000#logo

4

2 に答える 2

26

これは、少なくともSCSS v3.4.12の時点では、もはや当てはまりません。

これで、変数のスコープが正しくなりました。

入力:

$my-color: #000;

#logo {
    $my-color: #555;
    color: $my-color;
}

a {
    color: $my-color;
}

出力:

#logo {
  color: #555;
}

a {
  color: #000;
}

http://sassmeister.com/で試すことができます

于 2015-05-03T02:44:02.407 に答える
10

Sass変数のデフォルトスコープに対する回答を読むと、 SCSSでは変数の動作がLESSとは異なるようです。

この場合、inの定義は$my-colorグローバル#logo変数の値を変更しますが、LESSでは、そのグローバル変数のブロックローカルオーバーライドとして扱われます。

同じ結果を得るには、少し違った構造にする必要があると思います。

于 2012-09-11T15:45:19.023 に答える