Sass/Compass - 将十六进制、RGB 或命名颜色转换为 RGBA

Question

这可能是 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);

Answer 1

使用 Sass 中内置的 rgba 函数

设置颜色的不透明度。

示例：

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);

Answer 2

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

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

所以，我创建了一些构建 RGB 字符串的小函数。我现在不需要处理透明胶片。

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

Answer 3

我使用 rgbapng 指南针插件

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);

Answer 4

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

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

Answer 5

from_hex(hex_string, alpha = nil);

来自文档：

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

Answer 6

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

请注意，如果初始颜色（本例中的$primary）是纯色（没有透明度），则$alpha值必须是负< /strong> 值（最高 -100%）以增加透明度。

Answer 7

就我而言，rgba 不允许十六进制。

因此，我使用 transparentize 来减少 Alpha 通道。

.blue-background {
  background: transparentize(var.$color-my-blue, .8);
}