DEV Community


Posted on

What I learnt today: 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 ));



padding: var(--padding);



block-width: var(--blockwidth);



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.


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.

webdev #webdevelopment #CSS3 #coding

Discussion (1)