CSS VARIABLES
It works just like variables in SASS/ SCSS. You set a :root value of different variables, then you assign it to each element. Example
`: root{
--color: pink;
--padding: 15px;
--blur: 10px;
--block-width: 100px;
--gutter-size: 10px;
}
section {
width: calc(var(--block-width) + (var(--gutter-size) /2 ));
}
h2{
padding: var(--padding);
}
p{
block-width: var(--blockwidth);
}`
PROS AND CONS
Neat Code
This makes your code easy to read for other developers and even for future reference.
It comes in handy when there are a lot of codes to write.
It prevents clumsy codes, increases accuracy, arranges codes in easy-to-reach locations, and reduces confusion when coding.
Allows for more effective theming.
With CSS Variables, one can easily change the value of a variable and see the effect being implemented everywhere the variable is used.
Reduces the amount of time spent thinking and using complex styling methods.
With CSS variable styling, your codes are uniform and less complex.
Flexible code
It can be overwritten easily without affecting other values, thereby increasing the flexibility of the code.
CONS
CSS preprocessors remain the biggest weapon in this situation, as they can easily take colors and adjust values. Among the many other advantages these preprocessors provide, it's likely that these two systems will need to continue to collaborate as browser technology improves.
Top comments (0)