如何解决如何在SCSS颜色功能中控制HSLA alpha通道?
下面是我正在尝试做的一个例子。我敢肯定有更好的方法可以做到这一点。基本上,我希望函数通过color变量中的hsla颜色的alpha通道传递,因此我不必为每种颜色都具有多个颜色变量。
我希望能够这样调用该函数:
.item {background-color: color(blue,dark,.5);}
这是我到目前为止所拥有的:
$base-blue: hsla(200,100%,50%,1);
$base-blue-50: hsla(200,.5);
$palette: (
blue: (
base: $base-blue,light: lighten($base-blue,10%),dark: darken($base-blue,10%)
),blue-50: (
base: $base-blue-50,light: lighten($base-blue-50,dark: darken($base-blue-50,10%)
)
);
@function color($color,$tone: 'base') {
@return map-get(map-get($palette,$color),$tone);
}
基本上,我不需要创建$base-blue-50
变量。
感谢您的帮助:)
解决方法
如果您使用$base-blue
而不是hsl
来定义hsla
,则可以在color()
函数中动态调整其alpha值。
$base-blue: hsl(200,100%,50%);
$palette: (
blue: (
base: $base-blue,light: lighten($base-blue,10%),dark: darken($base-blue,10%)
)
);
@function color($color,$tone: 'base',$a: 1) {
$rgb: map-get(map-get($palette,$color),$tone);
@return rgba($rgb,$a); // Apply the alpha value
}
.item {
color: color(blue); // Output: #00aaff
color: color(blue,light); // Output: #33bbff
color: color(blue,dark); // Output: #0088cc
color: color(blue,dark,.5); // Output: rgba(0,136,204,0.5)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。