//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: developer.mozilla.org/en-US/docs/Web/CSS/…Mykyta Stelmaschenko– Mykyta Stelmaschenko2021-03-18 10:52:16 +00:00Commented Mar 18, 2021 at 10:52
Add a comment
|
3 Answers
:root {
--maincolor: red;
--mainfont: Arial;
}
body {
color: var(--maincolor);
font: var(--mainfont);
{
Comments
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
Comments
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.
