Я тут разбираюсь с каскадом и заметил какое-то странное поведение в нем.
Есть свойство в одном CSS-правиле. У него одно значение.
Затем ниже пишу второе CSS-правило, которое действует на тот же элемент, специфичность селекторов одинаковая. И во втором правиле переопределяю значение этого свойства другим значением. Всё работает.
Потом во втором правиле переопределяю значения свойства с помощью переменной. Получается совсем другой результат.
Чтобы было понятнее, вот пример кода. Прощёлкайте по шагам, до 7 шага.
Почему так получается?