От автора: переменные – одна из главных причин, по которой вообще существуют CSS препроцессоры. Очень удобная возможность установить переменную для таких вещей, как цвет, и использовать ее потом в коде. Так ваш код будет структурирован, в нем не будет повторений, и его можно будет легко изменить. Также вы можете воспользоваться нативными CSS переменными (пользовательские свойства). Но между ними есть важные различия, про которые необходимо знать.
Простой пример использования переменных в препроцессорах:
|
1 2 3 4 5 6 7 8 |
$brandColor: #F06D06; .main-header { color: $brandColor; } .main-footer { background-color: $brandColor; } |
Это был SCSS вариант Sass. Концепцию переменных предлагают все препроцессоры: Stylus, Less, PostCSS и т.д. Код выше ничего не делает. Браузер не поймет такое объявление и выбросит его. Чтобы работать с препроцессорами, их код необходимо компилировать в CSS. Код выше компилируется в:
|
1 2 3 4 5 6 |
.main-header { color: #F06D06; } .main-footer { background-color: #F06D06; } |
Теперь все правильно. Переменные являются частью языка препроцессора, а не CSS. После компиляции кода переменные уходят. Совсем недавно в CSS стали поддерживаться CSS переменные или пользовательские свойства. Вы можете работать с переменными напрямую в CSS. Не нужно никакой компиляции.
Простой пример использования пользовательских свойств CSS:
|
1 2 3 4 5 6 7 8 9 10 |
:root { --main-color: #F06D06; } .main-header { color: var(--main-color); } .main-footer { background-color: var(--main-color); } |
Эти два демо выполняют одно и то же. Мы задали цвет один раз и использовали его дважды. Так в каких случаях какие переменные использовать?
Зачем использовать пользовательские свойства CSS?
Их можно использовать без препроцессора.
Они каскадируются. Внутри селектора можно объявить переменную, чтобы она установила или перезаписала текущее значение.
Когда значения изменяются (например, медиа запросы или другое состояние), браузер все перерисует, как надо.
К ним можно обращаться и манипулировать ими через JS.
Простой пример каскадирования:
|
1 2 3 4 5 6 7 8 9 |
:root { --color: red; } body { --color: orange; } h2 { color: var(--color); } |
Все теги h2 будут иметь оранжевый цвет, так как они являются дочерними элементами тега body, у которого специфичность выше. Переменные даже можно перезадавать в медиа запросах, а новые значения каскадируются на всю разметку. С переменными в препроцессорах так не получится. Посмотрите этот пример. Медиа запрос изменяет переменные, которые используются для простой сетки:
Роб Додсон в своей статье «CSS переменные: почему на них стоит обратить внимание» выступает за них. «Переменные препроцессоров страдают от одного главного недостатка. Они статичны, и их нельзя изменять налету. Возможность изменять переменные налету не только открывает дверь к динамической темизации, но и оказывает большие последствия на адаптивный дизайн и возможность создания полифилов для будущих CSS свойств.»
Он написал демо, в котором через JS меняются стили. Стили меняются не напрямую, JS просто меняет значения нескольких CSS переменных налету:
Уэс Бос написал свое демо:
Я много чего не рассказал про пользовательские свойства CSS. Можно задавать фолбэки. Можно использовать функцию calc(). С переменными можно делать много чего интересного, смотрите раздел домашней работы ниже!
Зачем использовать переменные в препроцессорах?
Основная причина: отсутствие наследования поддержки в браузерах. Они компилируются в обычный CSS код.
Вторая причина: из значения можно вырезать единицы измерения.
Их можно использовать вместе
Существуют весьма веские причины, чтобы использовать переменные обоих типов. Можно с помощью CSS препроцессора выводить пользовательские свойства. Иван Иванов создал демо, которое позволяет писать пользовательские свойства CSS и через Sass выводить код с фолбэками:
Я склонен думать, что когда мы сможем использовать пользовательские свойства CSS, не думая о поддержке в браузерах, то мы будем использовать их везде. Препроцессоры можно использовать для чего-то еще, но обработка переменных в нативном CSS выглядит настолько здорово, что, может быть, лучше использовать только родные переменные.
Поддержка пользовательских свойств CSS в браузерах
Данные о поддержке взяты с сайта Caniuse, который также указывает на то, что эти свойства находятся в статусе W3C Candidate Recommendation.
Домашняя работа
1) Посмотрите ролик CSS Variables: var(—subtitle); от Ли Вероу
Она много рассказывает про практическое применение переменных, а также о парочке трюков. Например, как контролировать переменные во время каскадирования, а также о некоторых подводных камнях.
2) Посмотрите выступление Дэвида Куршида «реактивная анимация с помощью CSS»
Дэвид рассказывает про то, как связь DOM событий с переменными CSS может сильно повлиять на интерфейс, не сильно увеличивая код. Посмотрите слайды (с 26-го), чтобы понять, насколько это красиво.
3) Прочитайте статью Гарри Робертса «прагматичная, практичная и прогрессивная темизация с помощью пользовательских свойств»
В этой статье объясняется, насколько пользователю проще настраивать тему сайта через CSS переменные.
4) Прочитайте статью Романа Комарова «условия использования CSS переменных»
Об этом довольно часто говорят, но в CSS нет логических условий (т.е. @if (true) { }). Мы имитируем их иногда с помощью :checked, но все зависит от DOM. Роман показывает, как с помощью значений переменной 0 и 1 и функции calc() имитировать Булеву логику.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
