It works just like variables in SASS/ SCSS. You set a :root value of different variables, then you assign it to each element. Example
width: calc(var(--block-width) + (var(--gutter-size) /2 ));
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.
With CSS Variables, one can easily change the value of a variable and see the effect being implemented everywhere the variable is used.
With CSS variable styling, your codes are uniform and less complex.
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.