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

这可能是指南针101，但是有人编写了一个混合设置颜色的 alpha 值吗？理想情况下，我希望混合采取任何形式的颜色定义，并应用透明度:

@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);
72043 次浏览
小开
最佳答案

Use the rgba function built into Sass

Sets the opacity of a color.

Examples:

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

Parameters:
(Color) color
(Number) alpha — A number between 0 and 1

Returns:
(Color)

Code:

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

I use the rgbapng compass plugin

rgbapng is a Compass plugin for providing cross-browser* compatible RGBA support. It works by creating single pixel alpha-transparent PNGs on the fly for browsers that don't support RGBA. It uses the pure Ruby ChunkyPNG library resulting in hassle-free installation and deployment.

Install

gem install compass-rgbapng

Usage

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

Compiles to:

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

There's also ie-hex-str() for IE's ##AARRGGBB format:

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

From the documentation:

Create a new color from a valid CSS hex string. The leading hash is optional.

小开

The rgba function doesn't work on color with no transparency, it returns an hex again. After all, it's not meant to transform hex to rgba, we're just making profit out of hex doesn't allow alpha (yet).

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

So, I made al little functions that buils the rgb string. I don't need to deal with transparencies for now.

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

SASS scale-color() will do this in a flexible way: e.g. color: #{scale-color( $primary, $alpha: -50% )};. Full reference here.

Note that if the initial color ($primary in this example) is a solid color (with no transparency), then the $alpha value must be a negative value (up to -100%) to add transparency.

小开

In my case, rgba doesn't allow hex.

So, I use a transparentize which decreases the alpha channel.

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

提交答案