SASS 8 位十六进制颜色语法无效？

Question

我尝试将 RGBA 语法（在普通 CSS 中工作

#0abf3055

）与 SASS（在 Rails 6 应用程序项目中）一起使用：

background-image: linear-gradient(to right, #0abf3055, #22242F 30%)

但是我得到了：

“”后的 CSS 无效：预期的表达式（例如 1px、粗体）为“#0abf3055”

如果我替换为

rgba(#0abf30, 0.33)

它可以工作，但是我如何使用 SASS 的原生 8 位语法来获取颜色？

Answer 1

用于进一步重复目的的扩展答案

RGB 和 RGBA

RGB 是一种 24 位颜色，每个

red

、

green

和

blue

使用 3 个 8 位颜色通道。这些频道是用字母数字声明的。

8 位 = 2^8 => 256 这意味着您可以声明每个通道的颜色深度从 0（0% 深度）到 255（100% 深度）。

RGBA 为

alpha

值或不透明度添加第四个 8 位通道。这实际上意味着 RGBA 是 24 位颜色 + 8 位 alpha，这意味着它是 32 位颜色

十六进制代码颜色（Hex）

十六进制代码颜色不使用十进制数字，而是使用 16 位数字 (0-F)，因此称为十六进制。十六进制能够显示 4 位 (2^4 = 16)。这意味着默认情况下它是 12 位颜色。要将其扩展为 24 位颜色，请使用 2 位数字：

#RRGGBB

。

此处应用与 RGB 相同的方法。您可以添加第四个通道来添加 Alpha 值，以便您拥有 16 位或 32 位颜色。

为什么不能将 4 通道十六进制代码颜色添加到 RGBA 颜色中？

在使用

 rgba(#0abf3055, 0.33)

的情况下，您实际上有 5 个通道，每个通道 8 位：

通道1（红色）：10 通道 2（绿色）：191 通道 3（蓝色）：48 通道 4（阿尔法）：85 通道 5（阿尔法）：85

如您所见，您有 5 个通道，每个通道 8 位，等于 40 位。然而，RGBA 只允许有 32 位。

在您的情况下，用 85 声明两个 alpha 通道也是没有意义的。两个十六进制 55 都等于 85，与 0.33 相同，因为 8 位十进制也是 85。