CODEWITHSUNDEEP
csssasscompass-sassrgba
Pat Newell
Pat Newell

Reputation: 2294

Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

This may be Compass 101, but has anyone written a mixin which sets the alpha value of a color? Ideally, I would like the mixin to take any form of color definition, and apply transparency:

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

Upvotes: 105

Views: 86866

Answers (7)

yeop
yeop

Reputation: 29

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

Upvotes: 1

Martin_W
Martin_W

Reputation: 1807

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.

Upvotes: 1

Carlos Martínez
Carlos Martínez

Reputation: 339

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)+ ")";
}

Upvotes: 18

maxbeatty
maxbeatty

Reputation: 9325

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

Upvotes: 204

user776411
user776411

Reputation: 76

from_hex(hex_string, alpha = nil);

From the documentation:

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

Upvotes: 2

mikespainhower
mikespainhower

Reputation: 29

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 */

Upvotes: 2

Ilia Choly
Ilia Choly

Reputation: 18557

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

Upvotes: 8

Related Questions