css - 用透明值加深 SCSS 函数

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 中使这个变量变暗或变亮时，您要确保同时修改透明度值以确保它出现。