Sass新手必看！两种简单方法教你将十六进制颜色转换为RGB

最编程 2024-01-12 22:38:30

...

CSS中的颜色包含Hexa值以及RGB和RGBA值。

例如，#fff 是一个白色的Hexa代码。

RGB(255,255,255)是一个RGB颜色代码，包含红绿蓝三色值 rgba(255, 170, 255, 0.5) 是一个RGBA颜色代码，包含RGB和可选Alpha。

将Hexa颜色代码转换成RGBA颜色代码。

有多种方法，我们可以转换为rgba颜色代码:

hexacolor代码是一个必要的颜色代码 alpha是一个可选的透明度或不透明度或alpha通道

下面是一个将Hexa颜色代码转换为RGBA颜色的Sass代码

$color: #8fa;
$opacity: .2;

.div {
  color: rgba($color, $opacity);
}

以上，Sass被编译为CSS，如下所示输出CSS

.div {
     color: rgba(136, 255, 170, .2);
}

如果你传递一个无效的Hexa代码，它会抛出**fatal error: parse error: failed at **

 fatal error: parse error: failed at `$color: #kmn;
 (stdin) on line 1

对于以下无效的颜色代码

 $color: #kmn;
$opacity: .2;

.div {
  color: rgba($color, $opacity);
}

使用transparentize()函数另一种方法，使用sass框架提供的内置的本地函数。transparentize() 是一个内置的函数，接受Hexa和0到1之间的透明度。

例如，将背景色应用于div

div {
     background-color: transparentize(#fff, .3);
}

编译的CSS:

div {
     background-color: rgba(255, 255, 255, 0.7);
}

学习在sass和scss实例中把六色代码转换为rgba的多种方法