CSS-переменная в действии

Когда мы слышим о переменных, первое, что приходит на ум, - это JavaScript или любой другой язык сценариев, который упрощает жизнь. Но теперь создание переменных в чистом CSS также возможно. Однако у нас также есть некоторые препроцессоры на рынке, такие как Sass, Less и Stylus, с помощью которых мы можем определять переменные, но, опять же, они требуют компиляции перед использованием. Для конкретного такого требования CSS Variables - идеальный способ продолжить работу.

По мере того, как мы работаем над большим приложением, наш CSS становится огромным и повторяющимся. В этом случае переменные CSS играют важную роль и предоставляют решение для повторного использования и удаления повторяющихся свойств CSS. Все, что вам нужно сделать, это определить переменную для чего-то вроде «primary-color» и использовать эту переменную во всем приложении.

Работа с переменными CSS

Переменные CSS очень похожи на переменные JavaScript, с которыми мы все уже знакомы.

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

Теперь мы можем использовать эту переменную во всем нашем приложении с помощью функции var.

Здесь следует упомянуть еще одну вещь: когда значение переменной не установлено, она автоматически выбирает запасное значение, в приведенном выше случае оно синее.

Некоторые ключевые особенности

Мы также можем использовать переменные CSS в других переменных CSS, например, значение «–color-variable (x)», которое нам нужно использовать в какой-либо другой переменной «- border-variable. (y) », тогда мы сможем легко получить доступ к переменной« x »в« y ».

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

Его также можно использовать с функцией calc ().

Доступ к свойствам переменных CSS в JavaScript

Получение значения переменной CSS. Чтобы получить значение переменной CSS, мы используем «getComputedStyle» и «getPropertyValue».

Установка значения переменной CSS. Чтобы установить значение переменной CSS, мы используем «setProperty», и мы будем видеть, что новое значение применяется везде, где используется переменная.

Случаи, когда использование переменных CSS необходимо

Глобальные переменные

Вместо того, чтобы копировать и вставлять один и тот же цвет или размер снова и снова, мы можем определить глобальные переменные в одном месте и использовать эти переменные повсюду в приложении.

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

Создание тем с помощью CSS-переменных

Еще одно исключительное использование переменных CSS - это создание тем. Тематика означает изменение внешнего вида приложения, включая изменение цвета, фона, размера шрифта, значков и т. Д.

Раньше нам приходилось решать эту проблему, унаследовав все элементы с новым классом темы, например:

Но теперь это можно сделать с помощью нескольких строк JavaScript и разумного использования переменных CSS, примерно так:

В одном из наших проектов «Myra Chatbot» требовалось тематизировать все приложение, а также нам требовалось иметь стабильное решение для будущего использования (добавление больше тем в будущем). После некоторого исследования мы пришли к решению использовать переменные CSS, и оказалось, что в данном случае это сыграло важную роль.

Мы просто определили все переменные в одном месте примерно так.