переменные 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: Почему вы должны беспокоиться?

Он добавил пример, где JavaScript меняет стили, но не на самих элементах, а изменяя некоторые CSS переменные прямо на лету:

Пример Вес Боса (Wes Bos) демонстрирует то же самое:

В пользовательских свойствах CSS есть еще куча вещей, которые мы не рассмотрели. Вы можете настраивать для них откат. Можете использовать функцию calc(). С ними можно делать кучу крутых трюков. Посмотрите ниже раздел с домашним заданием!

Преимущества переменных препроцессоров:

• Одно большое: не нужно учитывать поддержку браузера. Код компилируется в обычный CSS.
• Одно поменьше: можете убрать из значения единицу, если хотите.

Можно использовать их вместе

Есть очень веская причина использовать и то и то. В выходном коде препроцессора вполне могут быть пользовательские свойства CSS. Иванов Иван сделал демо, позволяющее писать код, используя синтаксис пользовательских свойств CSS, а с помощью выходного кода Sass обеспечить резервное объявление:

Думаю, что как только мы сможем использовать пользовательские свойства CSS, не переживая о поддержке браузеров, мы только ими и будем пользовать. Мы по-прежнему будем использовать препроцессоры для других «удобств», но работа с переменными в родном CSS кажется на столько удобной, что стоит перейти на них.

Поддержка браузеров для пользовательских свойств CSS

Эта информация взята с сайта Caniuse, где также сообщается, что эта функция на W3C получила статус Candidate Recommendation.

Домашнее задание!

1. Посмотреть видео про CSS переменные Лиа Виэро (Lea Verou): var(--subtitle)
   Она показывает много практических применений, подводных камней, а также некоторые хитрости, например, как получить контроль над переменными в каскаде.
2. Посмотреть видео Давида Хоуршида (David Khourshid) об анимации с помощью CSS:
   Давид показывает как, объединив события DOM с CSS переменными, можно делать реально крутые штуки с небольшим количеством кода. Посмотрите его слайды, чтобы увидеть, насколько это круто.
3. Прочитать статью Гарри Робертса (Harry Roberts ) «Прагматическое, практическое и прогрессивное оформление сайтов с помощью пользовательских свойств».
   Его статья объясняет, насколько проще можно оформлять сайты, используя CSS переменные.
4. Прочитать про условия для CSS переменных Романа Комарова.
   Не смотря на то, что об этом так часто говорят, в условиях CSS (например, @if (true) { }) нет логики. Иногда мы заменяем их такими вещами как :checked, но они зависят от DOM. Роман показывает трюк, как можно использовать 0 или 1 как переменную, а потом использовать функцию calc(), чтоб имитировать булеву логику.

ПОХОЖИЕ СТАТЬИ:

• Новые CSS свойства
• Использование CSS переменных в разработке сайтов