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/ 
Простой
