Menu
I am trying to use CSS Variables. I look online for tutorials and all of them worked so far.
Here's my CSS:
@variables {
defaultColor: #8E5050;
defaultBackGround: #E1DBC3;
}
body {
background: var(defaultBackGround);
}
a {
color: var(defaultColor);
}
I also tried:
body {
background: @defaultBackGround;
}
a {
color: @defaultColor;
}
None of them works, What am I doing wrong? Thanks
801
Moreover, these have either a global scope or a local scope and can be accessed using the var() function. You can avoid writing down repeated CSS values by using these variables, furthermore, these are easier to understand. It is also possible to override CSS variables with one another.
var() The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.
You can use global variables to avoid duplicacy. Here, you can initialize a global variable in :root pseudo class selector. :root is top level of the DOM. However, you can always use the Syntactically Awesome Style Sheets i.e. In case Sass, you have to use $variable_name at the top to initialize the global variable.
The @property “at-rule” in CSS allows you to declare the type of a custom property, as well its as initial value and whether it inherits or not.
I would use a CSS preprocessor such as Sass or Less.
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
