Sass-将十六进制转换为RGBa以实现背景不透明度
我有以下Sass mixin，它是RGBa示例的一半完整修改：
@mixin background-opacity($color, $opacity: .3) {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, $opacity);
}
我已经申请了$opacity确定，但现在我对这个$color零件感到困惑。我将发送到mixin的颜色将是十六进制而不是RGB。
我的示例用法是：
element {
@include background-opacity(#333, .5);
}
如何在此混合中使用十六进制值？
第1931篇《Sass-将十六进制转换为RGBa以实现背景不透明度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
SASS具有内置的rgba（）函数来评估值。
rgba($color, $alpha)
例如
rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)
使用您自己的变量的示例：
$my-color: #00aaff;
$my-opacity: 0.5;
.my-element {
color: rgba($my-color, $my-opacity);
}
输出：
.my-element {
color: rgba(0, 170, 255, 0.5);
}
的RGBA（）函数可以接受单个十六进制颜色以及小数RGB值。例如，这可以正常工作：
@mixin background-opacity($color, $opacity: 0.3) {
background: $color; /* The Fallback */
background: rgba($color, $opacity);
}
element {
@include background-opacity(#333, 0.5);
}
但是，如果需要将十六进制颜色分解为RGB分量，则可以使用red（），green（）和blue（）函数来实现：
$red: red($color);
$green: green($color);
$blue: blue($color);
background: rgb($red, $green, $blue); /* same as using "background: $color" */
相似问题
问题类别
有一个内置的mixin：
transparentize($color, $amount);数量应在0到1之间；
Sass官方文档（模块：Sass :: Script :: Functions）