How to declare variable for common color in style.css like style.sass

Question

//style.sass

$common-color: #333;

body {
  font: 100% $font-stack;
  color: $common-color;
}

can I do the similar in css? because I am not using .sass for my project.

Maybe this link helps you too, as I understand your question: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties — Nikita Stelmaschenko, Mar 18 '21 at 10:52

score 1 · Answer 1 · answered Mar 18 '21 at 10:51

1

:root {
    --maincolor: red;
    --mainfont: Arial;
}

body {
   color: var(--maincolor);
   font: var(--mainfont);
{

answered Mar 18 '21 at 10:51

Kolja F

31
3

score 1 · Answer 2 · answered Mar 18 '21 at 10:56

You can write it as below

:root {
  --common-color: #333;
}

body {
  font: 100% $font-stack;
  color: var(--common-color);
}

Here :root is the scope of the variable

More information can be found in the link - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

score 1 · Answer 3 · answered Mar 18 '21 at 10:58

In CSS3 you're able to use variables by declaring them with --name-of-variable and access them with var(--name-of-variable). Your example would look like:

:root {
  --common-color: #333;
  --font-stack: 'Roboto', sans-serif;
}

body {
  font: 100% var(--font-stack);
  color: var(--common-color);
}

See https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties for more information about scoping and fallbacks.

How to declare variable for common color in style.css like style.sass

3 Answers3