使用透明值

Question

我有一个名为$ 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功能不能在透明值中工作？

Answer 1

transparent颜色值比实际颜色更多地作为参考。浏览器会将其转换为rgba(0, 0, 0, 0)，但SASS不支持使引用变亮/变暗。

只需设置$color0: rgba(0,0,0,0); - 而不是当前代码 - 这会为您提供相同的结果（透明度），但会为SASS提供根据需要减轻它的选项。

请注意，变暗/变亮很可能只影响最初的3个值 - 最终可能会出现rgba(200,200,200,0)，这仍然是透明的。在SASS中变暗或变亮此变量时，您还要确保修改透明度值以确保它出现。