переменные CSS против переменных препроцессоров

Переменные – это одна из основных причин существования препроцессоров. Возможность установить переменную, например, для цвета, использовать ее по всему CSS, и знать, что она неизменна, DRY (don’t repeat yourself) и легко меняется – очень полезно. По тем же причинам вы можете использовать и родные CSS переменные ("CSS Custom Properties"). Но стоит знать о некоторых важных отличиях.
Простой пример использования переменных препроцессора:
$brandColor: #F06D06;
.main-header {
color: $brandColor;
}
.main-footer {
background-color: $brandColor;
}
Это был SCSS, но все остальные препроцессоры тоже предлагают концепцию переменных: Stylus, Less, PostCSS и тд.
Код, показанный выше, ничего не делает в браузере. Браузер просто не понимает его и выкидывает. Чтобы использовать этот код, его нужно перекомпилировать в CSS, тогда он будет выглядеть так:
.main-header {
color: #F06D06;
}
.main-footer {
background-color: #F06D06;
}
Теперь это валидный CSS. Переменные были частью языка препроцессора, а не самого CSS. Как только код перекомпилировали, переменные исчезли.
Не так давно, родной CSS начал поддерживать переменные или «Пользовательские свойства CSS» ("CSS Custom Properties"). Это позволило работать с переменными напрямую в CSS. Без необходимости компилировать код.
Простой пример использования пользовательских свойств CSS:
:root {
--main-color: #F06D06;
}
.main-header {
color: var(--main-color);
}
.main-footer {
background-color: var(--main-color);
}
Эти два примера добиваются одинакового результата. Мы можем один раз задать цвет и использовать его несколько раз.
Какой же использовать, первый или второй?
Преимущества пользовательских свойств CSS:
- Их можно использовать без препроцессора.
- Они каскадные. Вы можете задать переменную внутри любого селектора, чтобы установить или изменить текущее значение.
- Когда их значения изменяются (например, в media query или еще как-то), то браузер перерисовывается по мере необходимости.
- Вы можете получить к ним доступ и изменять их через JavaScript.
Кстати, о каскаде, вот простой пример:
:root {
--color: red;
}
body {
--color: orange;
}
h2 {
color: var(--color);
}
Все h2 будут оранжевые, потому что все они являются дочерними элементами для тега body, который имеет высший приоритет.
Вы даже можете изменить переменные с помощью media queries и получить новые значения для каскада везде, где он используется. Получить нечто подобное, используя переменные препроцессоров, просто невозможно.
Посмотрите пример, где с помощью media query изменяются переменные, используемые для настройки простой сетки:
Роб Додсон поддерживает пользовательские переменные CSS: Почему вы должны беспокоиться?
Переменные препроцессоров имеют большой недостаток в том, что они статические и не могут быть изменены. Возможность менять переменные со временем не только открывает двери для динамического изменения приложения, но также имеет важное значение для адаптивного дизайна и потенциального развития будущих свойств CSS.
Он добавил пример, где JavaScript меняет стили, но не на самих элементах, а изменяя некоторые CSS переменные прямо на лету:
Пример Вес Боса (Wes Bos) демонстрирует то же самое:
В пользовательских свойствах CSS есть еще куча вещей, которые мы не рассмотрели. Вы можете настраивать для них откат. Можете использовать функцию calc(). С ними можно делать кучу крутых трюков. Посмотрите ниже раздел с домашним заданием!
Преимущества переменных препроцессоров:
- Одно большое: не нужно учитывать поддержку браузера. Код компилируется в обычный CSS.
- Одно поменьше: можете убрать из значения единицу, если хотите.
Можно использовать их вместе
Есть очень веская причина использовать и то и то. В выходном коде препроцессора вполне могут быть пользовательские свойства CSS. Иванов Иван сделал демо, позволяющее писать код, используя синтаксис пользовательских свойств CSS, а с помощью выходного кода Sass обеспечить резервное объявление:
Думаю, что как только мы сможем использовать пользовательские свойства CSS, не переживая о поддержке браузеров, мы только ими и будем пользовать. Мы по-прежнему будем использовать препроцессоры для других «удобств», но работа с переменными в родном CSS кажется на столько удобной, что стоит перейти на них.
Поддержка браузеров для пользовательских свойств CSS
Эта информация взята с сайта Caniuse, где также сообщается, что эта функция на W3C получила статус Candidate Recommendation.
Домашнее задание!
- Посмотреть видео про CSS переменные Лиа Виэро (Lea Verou): var(--subtitle)
Она показывает много практических применений, подводных камней, а также некоторые хитрости, например, как получить контроль над переменными в каскаде. - Посмотреть видео Давида Хоуршида (David Khourshid) об анимации с помощью CSS:
Давид показывает как, объединив события DOM с CSS переменными, можно делать реально крутые штуки с небольшим количеством кода. Посмотрите его слайды, чтобы увидеть, насколько это круто. - Прочитать статью Гарри Робертса (Harry Roberts ) «Прагматическое, практическое и прогрессивное оформление сайтов с помощью пользовательских свойств».
Его статья объясняет, насколько проще можно оформлять сайты, используя CSS переменные. - Прочитать про условия для CSS переменных Романа Комарова.
Не смотря на то, что об этом так часто говорят, в условиях CSS (например, @if (true) { }) нет логики. Иногда мы заменяем их такими вещами как :checked, но они зависят от DOM. Роман показывает трюк, как можно использовать 0 или 1 как переменную, а потом использовать функцию calc(), чтоб имитировать булеву логику.