Sass/Compass - 将 Hex、RGB 或命名颜色转换为 RGBA

Posted 2023-03-06

【中文标题】Sass/Compass - 将 Hex、RGB 或命名颜色转换为 RGBA

【英文标题】：Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

【发布时间】：2012-03-05 11:08:32

【问题描述】：

这可能是 Compass 101，但是有没有人写过一个 mixin 来设置颜色的 alpha 值？理想情况下，我希望 mixin 采用任何形式的颜色定义，并应用透明度：

@include set-alpha( red, 0.5 );          //prints rgba(255, 0, 0, 0.5);
@include set-alpha( #ff0000, 0.5 );      //prints rgba(255, 0, 0, 0.5);
@include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);

【参考方案1】：

SASS scale-color() 将以灵活的方式执行此操作：例如color: #scale-color( $primary, $alpha: -50% );。完整参考here。

请注意，如果初始颜色（本例中为$primary）是纯色（没有透明度），则$alpha 值必须是负 值（最高为@987654326 @) 添加透明度。

【参考方案2】：

rgba 函数不适用于没有透明度的颜色，它会再次返回一个十六进制。毕竟，这并不是要将 hex 转换为 rgba，我们只是从 hex 中获利，还不允许 alpha。

rgba(#fff, 1) // returns #fff

所以，我制作了一些构建 rgb 字符串的小函数。我暂时不需要处理透明胶片。

@function toRGB ($color) 
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";

【参考方案3】：

使用rgba function built into Sass

设置颜色的不透明度。

例子：

rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5) rgba(蓝色, 0.2) => rgba(0, 0, 255, 0.2)

参数： （颜色）颜色 (数字) alpha — 0 到 1 之间的数字

返回： （颜色）

代码：

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);

【讨论】：

@jon 你能详细说明我的答案令人困惑的地方，以便我改进它吗？

@maxbeatty 我不确定我的评论发生了什么，但我被“==>”弄糊涂了……事后看来，这似乎很明显，但是当您感到迷茫时，这真的很难告诉 cmets 所需的代码。我想这可以通过只在代码块中包含实际可用的代码来更清楚。

@jon 引用直接来自 Sass 文档。而不仅仅是链接到相关的内置函数。我认为在答案中包含相关文档会很有帮助。抱歉，这让您感到困惑。

请注意，如果您使用 255 的 alpha 值，这将不起作用。rgba(#123456, 255) 会生成 #123456，并且不会将颜色转换为 rgba 格式。

更语义化的方式是使用change-color() (docs)，例如：change-color( red, $alpha: 0.5 )。请注意，这会将 alpha设置为 50%（要增加或减少已经具有一定透明度的颜色的 alpha，请使用占百分比的 scale-color。）这是我的首选表示法因为我不喜欢用 RGB 进行设计。

【参考方案4】：

from_hex(hex_string, alpha = nil);

来自documentation：

从有效的 CSS 十六进制字符串创建新颜色。前导哈希是 可选。

【参考方案5】：

还有 ie-hex-str() 用于 IE 的 ##AARRGGBB 格式：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ie-hex-str(#fdfdfd)', endColorstr='#ie-hex-str(#f6f6f6)',GradientType=0); /* IE6-9 */

【参考方案6】：

我使用rgbapng compass plugin

rgbapng 是一个 Compass 插件，用于提供跨浏览器* 兼容 RGBA 支持。它通过创建单像素 alpha 透明 PNG 来工作 在不支持 RGBA 的浏览器中运行。它使用纯 Ruby ChunkyPNG 库可实现轻松安装和 部署。

安装

gem install compass-rgbapng

用法

@include rgba-background(rgba(0,0,0,0.75));

编译为：

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);