透明值

變暗SCSS功能我有一個變量，名爲$ COLOR0分配到一個透明的值，就像這樣：透明值

$color0: transparent;

每SCSS的規則，如果你使用的變暗/減輕功能給一個變量它應該做的只是。所以，如果我有一個分配給紅色變紅色，我應該能夠變深或變淺它像這樣：

$red: #ff0000; 
.my-darker-color{ 
    color: darken($red, 20%); //produces #990000 
}

我甚至可以使用此功能與原半透明的價值，它仍然會變暗它！所以說，例如，我手動減少紅色透明度RGBA（253，0，0，0.48），我仍然可以變黑它帶回了SCSS功能，像這樣：

$red: rgba(253, 0, 0, 0.48); 
.my-darker-color{ 
    color: darken($red, 20%); //produces rgba(151, 0, 0, 0.48) close to #990000 
}

現在，這裏是事情。如果我將透明度降得更低，那麼我會獲得更高的透明度。

我在這裏的計劃是變暗完全透明變量（無關緊要的顏色它產生我想深灰色或黑色），像這樣：

$color0: transparent; 
.my-darker-color{ 
    color: darken($color0, 80%); //give me anything...just not a transparency 
}

爲什麼沒有變暗SCSS功能以透明價值工作？

2017-07-21 LOTUSMS

你想讓透明度變暗嗎？沒什麼。沒有東西不會變暗或變亮。如果你願意，你可以使用RGBA作爲半透明顏色。 – Sergey

從技術上講，透明顏色在瀏覽器中呈現爲rgba（0,0,0,0），它可以變暗。例如rgba（0，0，0，0.15）;是15％較暗 – LOTUSMS

它對你來說是透明的。我沒有看到這兩個函數的算法。但是，這可能不是一個錯誤。 – Sergey

transparent顏色值的意思是作爲參考而不是實際顏色。瀏覽器將其轉換爲rgba(0, 0, 0, 0)，但SASS不支持使參考變亮/變暗。

而不是你目前的代碼，只需設置$color0: rgba(0,0,0,0); - 這會給你相同的結果（透明度），但給SASS一個選項，根據需要減輕它。

請注意，變暗/變亮很可能只會影響最初的3個值 - 您可能會以rgba(200,200,200,0)結束，這仍然是透明的。當在SASS中變暗或變亮這個變量時，您還要確保也修改透明度值以確保其顯示。

2017-07-21 17:34:14

回答