Variables in css

HTML & CSS
1

Hi I have started on a daunting project for the color layout in my css. But there must be a better way to do it .

Here is my setup in the css file:

.txt-color0, .txt0 a, .txt00 li a , .txt0 li .txt0 li a{
color:  rgba(232,232,232,1) !important; /* Black */
}
.primary1, .txt1, .txt1 a, .txt1 li, .txt1 li a {
color:  #4E6D9C !important;
}
.primary2, .txt2 , .txt2 a, .txt2 li, .txt2 li a {
color:  #335485 !important; /* Darker */
}
.primary3, .txt3, .txt3 a,.txt3 li, .txt3 li a {
color:  #1E406E !important; /* Darkest */
}
.primary4, .txt4, .txt4 a, .txt4 li, .txt4 li a {
color:  #7691B9 !important; /* Lighter */
}
.primary5, .txt5, .txt5 a, .txt5 li, .txt5 li a {
color:  #AABDDA !important; /* Lightest */
}
.complement1, .txt6, .txt6 a, .txt6 li, .txt6 li a {
color:  #ECD26B !important; /* Lightest */
}

But this does not c\ot cover all situation where I would like to use this colors. Is it not possible somehow to store these colors are variables ?

2

It is possible.

Support currently looks like this:-
https://caniuse.com/#search=variables

[ot]
Why is everything !important? :rolleyes:

3 Likes
3

Thanks SamA74 for great articles.

I thought this was pretty important :=) this will sure make styling easier

It was super easy to implement this into my css file . Thanks a lot for your help

4 
I thought this was pretty important :=) this will sure make styling easier

It is best to not use the !important in a declaration unless you intend to make that declaration nearly impossible to override later on in the code. :wink:

5

Thanks for the tip , these lines are deleted now :slight_smile:

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.