Are there any real benefits to using native variables instead of preprocessor variables?

Question

css

Actually the whole question.
The preprocessor is supposed to be used for other purposes anyway.

Answer 1

1) CSS variables, these are really variables, not constants, as is the case with SCSS. those. you can override their values ​​in media, and all dependent properties will be redrawn. Example (change window width to see result) https://jsfiddle.net/Vlad_IT/Lh514n37/
2) You can use css variables inside SVG. It is very convenient to create a hover effect for a complex icon by simply changing the necessary variables. Examples https://jsfiddle.net/Vlad_IT/q7smxrhz/ https://jsfiddle.net/Vlad_IT/30ewxLks/
3) You can change and read css variables through JS. Example https://jsfiddle.net/Vlad_IT/5pyn2Lo9/
4) You don't need to use a preprocessor.
5) They are cascading. those. if there is a global variable, for example, the color is red, then in a certain block you can override it, and then in the child blocks there will already be a redefined color. Example https://jsfiddle.net/Vlad_IT/4qbkLr1a/2/