Переменные в CSS без препроцессоров

 АЛЕКСАНДР МАЙОРОВ, Tutu.ru, руководитель отдела Frontend-разработки, alexander@majorov.su

Переменные в CSS без препроцессоров

В статье рассмотрим новый механизм нативных переменных в CSS или, как правильнее, пользовательских свойств. Как они работают, какие особенности, примеры использования

Чего всегда остро не хватало в каскадных таблицах стилей, так это возможности выносить повторяющиеся блоки в переменные. Хотя, помимо этого, много чего еще не хватает, особенно программистам, но переменные – это же основа основ.

Справиться с этим недостатком мир веб-разработки смог с помощью препроцессоров. Но все-таки нам не хватало родных нативных переменных. И вот свершилось – в CSS можно писать переменные (пользовательские свойства). Подробнее об этом мы и поговорим.

Переменные или свойства?

Официально они называются «Custom properties». Но также используется активно название «Native variables». Если вы программист, то точно хорошо знакомы с переменными и неможете себе представить жизнь без них. По определению переменная – это временное хранилище, которое содержит некое значение величины или информации. Переменной можно присвоить значение. Переменными можно оперировать и получать новые значения, которые, в свою очередь, присваиваются новой переменной.

Идея использовать переменные для таблицы стилей была одной из тех причин, по которым появились препроцессоры LESSS, SASS, Compas… CSS-препроцессоры – замечательные инструменты, облегчающие работу верстальщиков, позволяя разбивать CSS на модули, задавать переменные и описывать пространства имен. Но переменные в них статичны, а навыходе препроцессора мы получаем все тот же статичный CSS с множеством повторяющихся кодов.

К тому же переменные препроцессоров не каскадируются. А мы же работаем с каскадом стилей. При использовании переменных рано или поздно встает вопрос области видимости. Должна ли конкретная переменная быть глобальной, должна ли она ограничиваться своим файлом, модулем или блоком? Поскольку CSS оформляет HTML, то выходит, что лучший способ ограничивать область видимости – это на уровне DOM-элемента. А так как препроцессоры работают не в браузере и никогда не видят разметки, то им это недоступно.

Нативные CSS-переменные – совсем другой вид переменных. Главное их преимущество – они динамические, а их видимость привязана к DOM. Название «переменные» привычно для программистов, но оно сбивает с толку. На самом деле это CSS-свойства, что дает им совершенно другой спектр возможностей и позволяет им решать совсем другие задачи.

Пользовательские CSS-свойства – такие же CSS-свойства, как и другие, и ведут себя они точно так же (с тем исключением, что они не применяют никакого оформления).

Как и обычные CSS-свойства, пользовательские свойства динамичны:

• можно менять во время выполнения;
• можно обновлять в медиавыражении;
• можно обновлять при добавлении нового класса в DOM
• можно задавать inline;
• можно перекрывать, пользуясь всеми правилами каскада;
• они наследуются.

Проще говоря, препроцессорные переменные ограничены статической областью видимости и после компиляции становятся статичными, в то время как видимость пользовательских свойств привязывается к DOM.

Статью целиком читайте в журнале «Системный администратор», №06 за 2016 г. на страницах 62-63.

PDF-версию данного номера можно приобрести в нашем магазине.

Комментарии могут оставлять только зарегистрированные пользователи