css - Sass 変数宣言の優先順位

Question

2 つのファイルで同じ名前の変数を宣言しています。次の順序でそれらをインポートすると、競合が見つかりました。

Modal.scss

$gray : #e1e1e1;    // Imported first

変数.scss

$gray : #999;       // imported later

予想される動作は、 の値$grayが上書きされることです。ただし、 CSSで ( ) ではなく、最初にインポートされた値 ( #e1e1e1) を取得しています。#999

変数を複数回宣言する間違ったことをしていますか?

Answer 1

どうやら、Sass は最初の変数宣言を取るようです。

たとえば、Sass で Bootstrap を使用する場合、Bootstrapをインポートする前に、オーバーライドするすべての変数を宣言する必要があります。

// This will override the default $brand-primary in Bootstrap
$brand-primary: #000;

// Importing Bootstrap
@import 'bootstrap';

Answer 2

light-gray: #e1e1e1;やのように色名を変更する必要があると思いますdark-gray: #999;。これはあなたの問題を解決するのに役立ちます。