Не упустите из виду переменные CSS

Не упустите из виду переменные CSS

От автора: сначала, когда я услышал о переменных CSS, я был настроен немного скептически. Зачем кому-то использовать их, если есть такие языки расширения, как scss, sass, less и stylus. Через несколько лет я начал замечать, что все больше и больше людей используют их, пишут об этом и говорят об этом. Я что-то упустил из виду… Это заняло какое-то время, но после того, как я использовал их здесь и там, меня зацепило. В этом посте я расскажу о том, что убедило меня продолжить изучение переменных css и начать их использование в проектах.

Использование

Чтобы объявить переменные, определите их в селекторе и добавьте к имени переменной два дефиса (—):

Распространенный подход заключается в определении переменных с помощью селектора :root, таким образом вы определяете глобальную переменную:

Чтобы применить переменные, используйте функцию var():

Функция var() принимает второй параметр, который используется в качестве запасного варианта , если переменная не объявлена:

Фрагменты кода выше дают:

Не упустите из виду переменные CSS

Темы

С помощью переменных CSS создание темы становится простым. В зависимости от класса body мы можем установить для переменной соответствующее значение:

Затем мы можем использовать эти переменные при стилизации элементов:

Если класс body изменится с sunriseor на sunset, переменные css будут каскадными для всех селекторов. В нашем случае мы перейдем к светлой или темной теме:

Не упустите из виду переменные CSS

JavaScript API

Это, на мой взгляд, лучшая часть. Переменные CSS имеют JavaScript API для получения и установки переменных. Чтобы получить переменную, используйте метод getPropertyValue:

Чтобы получить значение из элемента, сначала выберите этот элемент с помощью querySelector:

Чтобы установить значение переменной, используйте style.setProperty:

Чтобы установить значение для элемента:

Этот API открывает некоторые возможности для чистого использования переменных CSS.

Я столкнулся с этим примером использования Дэвида К. пару дней назад в одной из его демонстраций XState по адресу //codepen.io/davidkpiano/pen/zWrRye. Он использует переменные css для создания поля выбора, когда пользователь перемещает мышь по экрану.

CSS окна выбора использует переменные, чтобы определить четыре угла (на основе начальной точки и текущей позиции мыши) блока:

Прослушиваем события мыши и обновляем точки мыши соответственно:

Не упустите из виду переменные CSS

Заключение

Если вы похожи на меня и не видели пользы переменных css или не знали, что они существуют, я надеюсь, что этот пост открыл вам дверь и вы начнете исследовать их варианты использования.

Я случайно наткнулся на JavaScript API, но этот API открыл мне глаза на их использование в реальном мире, и я с нетерпением жду возможности применить их в будущем проекте.

Автор: Tim Deschryver

Источник: //dev.to

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: