css - SCSS 複数の変数が同じ値

Question

この SCSS/SASS がある場合:

$a: #fff;
$b: #fff;
$c: #fff;
$d: #fff;

これに対するショートカットはありますか？つまり、同じ値を複数の変数に簡単に代入するにはどうすればよいでしょうか?

Answer 1

何らかの理由で同じ値を保持する必要があるが、セマンティクスや読みやすさのために、または将来の単純な変更を可能にするために別々の変数として保持する必要がある場合は、次のようにすることができます。

$a: #fff;
$b: $a;
$c: $a;
$d: $a;

これは、開発プロセス中に変化する可能性のある色を処理するときに時々行います。次に例を示します。

$background_color: white;
$text_color: #444;
$link_color: $text_color;
$overlay_color: rgba($background_color, 0.7);

これは、の値を変更して同じ変更$text_colorを$link_color反映すると同時に、$link_colorまったく異なるものに設定できるので便利です。$text_color同様に1つの変数のみを使用$link_colorするということは、テキストに関連するインスタンスとリンクに関連するインスタンスを確認するために、すべてのインスタンスを手動で調べる必要があることを意味します。変数に名前を付けるのは、変数の使用目的、つまり$text_color、$link_colorではなく、ということをお勧めします$blueish_color。

Answer 2

4つの変数を使用せず、同じ値の場合は1つのみを使用してください

$a: #fff;
$a: #fff;
$a: #fff;
$a: #fff;