SASS/SCSSでの変数オーバーライドの定義

私は以前にsassを使用していましたが、私は思うかもしれないと思います。「SASS/SCSSでの変数オーバーライドの定義

$base-color: #ffffff; 
.pink { 
    $base-color: #ec008c; 
} 
.green { 
    $base-color: #a4d20e; 
} 
a, .pink a, .green a { 
    color: $base-color; 
}

私はそのページ内のすべての<a>の要素を作ることになる、<body>要素にクラス.pinkを与えることができることを意味する、どの：

は、それは可能な限り、このような何かをすることであり、どのようにしてピンク"。これは、簡略化された例ではありますが、SASSがすべきことのようです。

私が上に簡略化される前に言ったように、次の点を考慮し

a { 
    color: #ffffff; 
} 
.pink a { 
    color: #ec008c; 
} 
.green a { 
    color: #ec008c; 
}

：

$base-color: #ffffff; 
.pink { 
    $base-color: #ec008c; 
} 
.green { 
    $base-color: #a4d20e; 
} 
.pink, .green { 
    #header #nav li a { 
    color: $base-color; 
    } 
}

は私にそうような何かを与える必要があります：上記SCSSはまあまあのようなものをコンパイルう意味

.pink #header #nav li a { 
    color: #ec008c; 
} 
.green #header #nav li a { 
    color: #a4d20e; 
}

これは、 SCSS/SASSでuldを実行することができ、大規模なプロジェクトでは、コーディング時間と保守性の両方で多くの配当を支払うことになります。

出典

2011-08-09 Christopher

明らかに、適切なシナリオでは、コンパイルされたCSSは、SCSSで必要とされるものよりも多くの行が長くなります。 – Christopher

あなたが提案した構文を使用してSASSを動作させる方法があるかどうかわかりませんが、mixinsを使用して同様の効果を得ることができます。あなたは、ミックスインとしてあなた.pinkの内部でミックスイン@includeをスタイルシート全体を構築し、可能性があり、基本的に

a { 
    color: white; } 
#header #nav { 
    color: white; } 
#header #nav li a { 
    color: white; } 

.pink a { 
    color: #ec008c; } 
.pink #header #nav { 
    color: #ec008c; } 
.pink #header #nav li a { 
    color: #ec008c; } 

.green a { 
    color: #a4d20e; } 
.green #header #nav { 
    color: #a4d20e; } 
.green #header #nav li a { 
    color: #a4d20e; }

：

は

これは、以下のCSSの出力を生成します。これは私がそれを行うだろうかです.greenクラス。

出典

2011-08-09 10:54:11 nelstrom

'$ base-color'は次のように' @ minin'に渡されなければならないと思われます： '.green {@include headernav（＃a4d20e）; } 'etcなどですが、そうでなければこの解決策はうまくいきます – Christopher

私はそれを書いているので（sassバージョン3.1.7でテストしました）うまく動作しますが、引数を受け入れるようにmixinを設定することもできます。このケースではもっと見た目がいいかもしれませんが、mixinが成長した場合は、より多くの変数を使用する可能性があります。 '$ bg-color'、' $ highlight-color'、 '' $ active-color'、 '$ dimmed-color'のように指定します。その場合、ミックスインを含めると、すべてのものを引数として渡すのが面倒なように見えるかもしれません。 – nelstrom

SASS/SCSSでの変数オーバーライドの定義

答えて

関連する問題