顏色不是在薩斯

Question

正確串接

我想在薩斯連接兩個顏色：

$helloWorld: pink; 
$secondString: red; 

p { 
    color:$helloWorld + $secondString; 
} 

但結果是：

p { 
    color: pink; } 

爲什麼沒有顏色拼接產生pinkred？

Answer 1

這是因爲Sass將所有顏色都視爲它們的十六進制值，無論它們是否被命名爲pink。它們都是十六進制值。每Sass Documentation：

顏色

任何CSS顏色表達式返回SassScript顏色值。這包括a large number of named colors，它們與未加引號的字符串無法區分。

重點是我的。該文檔指出顏色值被返回，這是十六進制值。包含的鏈接還顯示，如pink的命名顏色只是十六進制值。爲了解決增加問題，請參閱再次documentation：

顏色操作

所有的算術運算的顏色值，他們在哪裏工作分段的支持。這意味着操作依次在紅色，綠色和藍色組件上執行。例如：

p { 
    color: #010203 + #040506; 
} 

計算01 + 04 = 05, 02 + 05 = 07, and 03 + 06 = 09，並編譯成：

p { 
    color: #050709; } 

同樣的原則也適用於這裏。當你在顏色上使用加法時，你並不像字符串那樣連接它們，所以pink + red不是pinkred。相反，十六進制值是分段添加的。這裏有一個例子：

$blue: blue; 
$red: red; 

p { 
    color: $blue + $red 
} 

這產生了：

p { 
    color: magenta 
} 

從上面的例子中，你可以看到，這個不執行字符串連接，但它加入藍色（#0000FF）和紅色（#FF0000）至創建洋紅色（#FF00FF）。在你的情況下，粉紅色（#FFC0CB）和紅色（#FF0000）分段添加產生#FFC0CB，這只是粉紅色。這就是爲什麼你得到pink而不是pinkred。

如果要將它們串接起來就像字符串，不要使用+。相反，你可以嘗試string interpolation這樣的顏色被視爲字符串，而不是顏色：

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

，將產生：

p { 
    color: pinkred 
} 

您也可以使用更詳細的方法，以便它被迫像一個字符串（引文結束剛剛擺脫了引號）：

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

Try it at SassMeister。請注意，pinkred不是Sass中的一種命名顏色。