色はサス

Question

に正しく連結されていない私は、サスの2色を連結しようとしています：

$helloWorld: pink; 
$secondString: red; 

p { 
    color:$helloWorld + $secondString; 
} 

をしかし、結果は次のとおりです。

p { 
    color: pink; } 

はなぜ色がpinkredを生成するために連結されていませんか？

Answer 1

これは、Sassがpinkのように名前が付けられていても、すべての色を16進値として扱うからです。それらはすべてフードの下の16進値です。 Sass Documentationあたり：

色

任意のCSSの色表現SassScriptカラー値を返します。これには、引用符で囲まれていない文字列と区別がつかないa large number of named colorsが含まれます。

強調は私のものです。ドキュメントには、カラー値が返されることが示されます。これは16進値です。含まれているリンクはまた、pinkのような名前付き色がフードの下のちょうど16進値であることを示しています。追加問題に対処するために、再びdocumentationを参照してください。

色オペレーション

をすべての算術演算は、それらが区分的に動作するカラー値、のためにサポートされています。これは、操作が赤、緑、青のコンポーネントに対して交互に実行されることを意味します。たとえば：

p { 
    color: #010203 + #040506; 
} 

は01 + 04 = 05, 02 + 05 = 07, and 03 + 06 = 09を計算し、にコンパイルされます。同じ原則がここに適用され

p { 
    color: #050709; } 

。色の追加を使用すると、文字列のように連結しないので、pink + redはpinkredではありません。代わりに、16進値が区分的に追加されます。あなたは、これは文字列の連結を行っていないことを確認することができ、上記の例から、

p { 
    color: magenta 
} 

が、それは青（#0000FF）と赤（#FF0000）を追加しています：

$blue: blue; 
$red: red; 

p { 
    color: $blue + $red 
} 

この利回り：ここでは例ですマゼンタ（#FF00FF）を作成します。あなたのケースでは、ピンク（#FFC0CB）と赤色（#FF0000）をピース単位で追加して#FFC0CBを生成します。ピンク色です。だからpinkredの代わりにpinkが得られます。

文字列のように連結する場合は、はを使用しないでください。+を使用してください。代わりに、あなたはstring interpolationを試すことができますので、色は文字列ではなく、色として扱われます。

p { 
    color: $helloWorld#{$secondString} 
} 

得られます：のように行動することを余儀なくされますように

p { 
    color: pinkred 
} 

あなたはまた、より詳細な方法を使用することができます文字列（ちょうど引用符を取り除くにunquote）：

p { 
    color: unquote($helloWorld+ "" + $secondString); 
} 

Try it at SassMeister。 pinkredはSassの名前付き色ではありません。