[英]SASS Simple function to convert HEX color into RGB as a string without alpha
I am looking for simple function in SASS that simply convert HEX color into RGB as a string.我在 SASS 中寻找简单的 function ,它只是将 HEX 颜色转换为 RGB 作为字符串。 I was googling, but without lucky.我在谷歌上搜索,但没有幸运。 Maybe because there is not any native function in SASS?可能是SASS里面没有原生的function? Sure, there is rgba()
function, but I dont wanna rgba(
... )
piece.当然,有rgba()
function,但我不想rgba(
... )
片。 Simply the RGB string.只是 RGB 字符串。
$color-bg: #637b9a;
$color-bg-light: lighten($color-bg, 25%);
$color-bg-light-rgb: hex2rgb($color-bg-light); // Functon that I am looking for
:root {
--color-body-bg-light: $color-bg-light;
--color-body-bg-light-rgb: $color-bg-light-rgb;
}
body {
color: var(--color-body-bg-light);
background-color: rgba(var(--color-body-bg-light-rgb), 0.8);
}
:root {
--color-body-bg-light: #237b9a;
--color-body-bg-light-rgb: 44, 123, 154;
}
body {
color: var(--color-body-bg-light);
background-color: rgba(var(--color-body-bg-light-rgb), 0.8);
}
You can write the function like this:你可以这样写 function:
@use "sass:color";
@function hex2rgb($hex) {
@return red($hex), green($hex), blue($hex);
}
But the problem is sass could not parse the variables for html custom properties.但问题是 sass 无法解析 html 自定义属性的变量。 So this line --color-body-bg-light: $color-bg-light;
所以这一行--color-body-bg-light: $color-bg-light;
won't work.不会工作。
At the end, you will get this:最后,你会得到这个:
:root {
--color-body-bg-light: $color-bg-light;
--color-body-bg-light-rgb: $color-bg-light-rgb;
}
You can't do that with Sass but you can use JavaScript to get the desired result.你不能用Sass做到这一点,但你可以使用JavaScript来获得想要的结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.