Define colors in CSS

Sparkling
1

Hi @movin,
I’d like to define color variables in CSS and use the also in third party CSS CUSTOMIZER.

Why this solution doesn’t work?

Thanks

:root {
	--primary-color: #285157;
	--secondary-color: #4c4c4c;
	--accent-color: #df1616;
	--divider-color: #840a1b;
}

h1 {
  color: var(--primary-color);
}
2

Hi @fuoriluogoasti,

I hope you are well today and thank you for your question.

I am not sure what you meant by defining color variables in CSS. Could you please describe it a bit more in detail so that i can help you?

Kind Regards,
Movin

3

Hi @Movin,

My aim is to define those 4 color variables into the style.css file.
Then, use the variables into the css code, and also into third party plugin for customized css.
I followed this guide:

I need to define some color as variable because I need to change often the colors of the site.
So, it is a lot amount of work every time change the hex color value into the entire css file for every element, so using color variables will let me just change the hex color codes into the first definition, and the changes will be cascaded into the entire css file and will update the site in very short time.

I tried, but it doesn’t work.

What’s wrong with it?

Thanks

4

You are doing it wrong. You can’t use variables in the CSS until you use any CSS pre-processor like following.

http://sass-lang.com/guide
http://lesscss.org/