Переменные в CSS: зачем они нам?
Переменные в CSS: зачем они нам?
CSS-переменные, более известные как кастомные CSS-свойства, доступны в Chrome начиная с 49 версии. Они могут быть полезны для уменьшения количества повторяющегося кода в CSS, создания впечатляющих эффектов вроде смены тем на лету и, потенциально, создания полифилов для будущих возможностей CSS.
Хаос в CSS
Обычная практика при разработке приложения — составить набор фирменных цветов, которые будут использоваться, чтобы поддержать единый стиль. Увы, многократное использование этих цветов в CSS не только является рутинной работой, но ещё и создаёт пространство для возникновения ошибок. Если в какой-то момент один из цветов нужно будет поменять, разработчик может неосторожно воспользоваться поиском и заменой по всему документу, что в большом проекте может быть довольно опасно.
В последнее время многие разработчики стали использовать CSS-препроцессоры типа SASS или LESS, которые решают эту проблему с помощью переменных. Хотя эти инструменты заметно увеличили продуктивность разработки, препроцессорные переменные имеют очень серьёзный недостаток: они статичны и не могут меняться на лету. Появление возможности динамически менять переменные не только позволит на лету менять темы сайта или приложения, но также означает значительное расширение возможностей отзывчивого дизайна и возможность создания полифилов для будущих свойств CSS. С выходом Chrome 49 переменные стали доступны в виде кастомных CSS-свойств.
Кастомные свойства в двух словах
Кастомные свойства расширяют наш CSS-инструментарий двумя новыми возможностями:
- Автор кода может присваивать произвольные значения свойствам с придуманными им самим именами.
- Функция
var()позволяет затем использовать эти значения в других свойствах.
Краткий пример для демонстрации:
Статья полностью здесь
Оставить комментарий
Войдите, чтобы оставить комментарий.
Ничо не понял — но ценю!
Молодца
Перечитал, осмыслил — все равно не понял
Не мое…