CODEWITHSUNDEEP
csssasscolors
TaouBen
TaouBen

Reputation: 1315

How Can I change color hex code to rgba using only CSS?

I have a small question that can cause me a problem, I have a project where I set a variable to a color using SASS, here is here is my SASS file __colors.scss : 

$wild-watermelon: #f55463;

When I use this color, I do something like this : 

.container {
    background-color: $wild-watermelon;
}

But I have something with I need to use the color but a little bit transparent, to do so, I have to use rgba(number, number, number, 0.75).

But I don't find this solution a propper one because if I want to change my theme coloring, I have to make changes in multiple files manually, not just one by changing my global variable.

I readed once a proposition, a solution let's say, suggesting that I use var function and I do something like this : 

 .container {
     background-color: rgba(var($wild-watermelon),0.75);
 }

It did not work of course, that is why I am here.

Any help would be much appreciated.

Upvotes: 3

Views: 1945

Answers (1)

Erika Ravazzolo
Erika Ravazzolo

Reputation: 109

Try:

 $wild-watermelon: #f55463;

 .container {
   background-color: rgba($wild-watermelon, 0.75 );
 }

If you want to change the color, just change the hex code of the variable.

I would suggest to pick a more generic name though (e.g. $color-primary), just in case you do change the color scheme of your project in the future, so you don't have to change the variable name also. This way is more maintainable.

Upvotes: 2

Related Questions