Есть ли реальные преимущества использования нативных переменных вместо препроцессорных?

Question

[coderxx]

Собственно весь вопрос.
Предполагается, что препроцессор в любом случае используется для прочих целей.

Answer 1

[Владимир Проскурин]

1) CSS переменные, это реально переменные, а не константы, как в случае с SCSS. т.е. вы можете в media переопределять их значения, и все зависимые свойства будут перерисованы. Пример (меняйте ширину окна, чтобы увидеть результат) https://jsfiddle.net/Vlad_IT/Lh514n37/
2) Вы можете использовать переменные css внутри SVG. Очень удобно делать hover эффект для сложной иконки, просто меняя нужные переменные. Примеры https://jsfiddle.net/Vlad_IT/q7smxrhz/ https://jsfiddle.net/Vlad_IT/30ewxLks/
3) Вы можете менять и читать css переменные через JS. Пример https://jsfiddle.net/Vlad_IT/5pyn2Lo9/
4) Вам не нужно использовать препроцессор.
5) Они каскадные. т.е. если есть глобальная переменная, например цвет красны, то в определенном блоке вы можете ее переопределить, и тогда в дочерних блоках уже будет переопределенный цвет. Пример https://jsfiddle.net/Vlad_IT/4qbkLr1a/2/

Comments

[coderxx]

Благодарю за развернутый ответ!