SASS: converting RGB to RGBa - css

Question

I have set up the colours of my project like so:
$blue: rgb(75, 179, 209);
Is there any way to use this variable and convert the value into RGBa elsewhere as needed?

Answer 1

using rgba instance method
you can
$blue: rgb(75, 179, 209);
body {
background:rgba($blue, .5);
}
can test here: http://sass-lang.com/try.html

Answer 2

Perhaps a better solution would be to create your own function which you'll call whenever you need it.
Hampton Catlin (the author of Sass) proposes a good solution, which basically goes like this:
#function set-opacity ($color) {
$lightness: lightness($color);
$trans-value: transparentize($color, $lightness);
#return $trans-value;
}
So, in essence, you firstly use the Sass function lightness (which is complementary to opacity), and then the Sass function transparentize - which second argument is the result of transparentize.
However, Catlin shows that this needs to be improved - since ligthness() results in percents, but we need values between 0 and 1.
Therefore, we need an additional function that transforms percents to the desired values. It is a simple function, since we simply divide the percents with 100.
#function percent-to-number ($val) {
#return $val / 100;
}
Now, we are ready to go - and the whole block of code goes like this:
#function percent-to-number ($val) {
#return $val / 100;
}
#function set-opacity ($color) {
$lightness: lightness($color);
$lightness-number: percent-to-number($lightness);
$trans-value: transparentize($color, $lightness-number);
#return $trans-value;
}
So, for example,
color: set-opacity(#f00);
gives this CSS output:
color: rgba(255, 0, 0, 0.5);
Hopefully this helps. It seems too much work, but if you put this function in partials _functions, it will always be helpful. Otherwise, you'll end up writing a variable for each colour you want alpha value.