sass - SCSS変数スコープ

Question

私はスタイルシートを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

score 26 · Accepted Answer

これは、少なくとも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/で試すことができます

score 10 · Accepted Answer

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

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

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

2 に答える 2