От автора: сначала, когда я услышал о переменных CSS, я был настроен немного скептически. Зачем кому-то использовать их, если есть такие языки расширения, как scss, sass, less и stylus. Через несколько лет я начал замечать, что все больше и больше людей используют их, пишут об этом и говорят об этом. Я что-то упустил из виду… Это заняло какое-то время, но после того, как я использовал их здесь и там, меня зацепило. В этом посте я расскажу о том, что убедило меня продолжить изучение переменных css и начать их использование в проектах.
Использование
Чтобы объявить переменные, определите их в селекторе и добавьте к имени переменной два дефиса (—):
1 2 3 |
div { --bgColor: deeppink; } |
Распространенный подход заключается в определении переменных с помощью селектора :root, таким образом вы определяете глобальную переменную:
1 2 3 |
:root { --bgColor: teal; } |
Чтобы применить переменные, используйте функцию var():
1 2 3 |
div { background: var(--bgColor); } |
Функция var() принимает второй параметр, который используется в качестве запасного варианта , если переменная не объявлена:
1 2 3 4 |
header { background: var(--bgColor); color: var(--color, beige); } |
Фрагменты кода выше дают:
Темы
С помощью переменных CSS создание темы становится простым. В зависимости от класса body мы можем установить для переменной соответствующее значение:
1 2 3 4 5 6 7 8 9 |
body.sunrise { --background-color: #fff; --text-color: #333; } body.sunset { --background-color: #333; --text-color: #fff; } |
Затем мы можем использовать эти переменные при стилизации элементов:
1 2 3 4 5 |
html, body { background: var(--background-color); color: var(--text-color); } |
Если класс body изменится с sunriseor на sunset, переменные css будут каскадными для всех селекторов. В нашем случае мы перейдем к светлой или темной теме:
JavaScript API
Это, на мой взгляд, лучшая часть. Переменные CSS имеют JavaScript API для получения и установки переменных. Чтобы получить переменную, используйте метод getPropertyValue:
1 |
getComputedStyle(document.documentElement).getPropertyValue('--color') |
Чтобы получить значение из элемента, сначала выберите этот элемент с помощью querySelector:
1 |
getComputedStyle(document.querySelector('h1')).getPropertyValue('--color') |
Чтобы установить значение переменной, используйте style.setProperty:
1 |
document.documentElement.style.setProperty('--color', 'red') |
Чтобы установить значение для элемента:
1 |
document.querySelector('h1').style.setProperty('--color', 'blue') |
Этот API открывает некоторые возможности для чистого использования переменных CSS.
Я столкнулся с этим примером использования Дэвида К. пару дней назад в одной из его демонстраций XState по адресу //codepen.io/davidkpiano/pen/zWrRye. Он использует переменные css для создания поля выбора, когда пользователь перемещает мышь по экрану.
CSS окна выбора использует переменные, чтобы определить четыре угла (на основе начальной точки и текущей позиции мыши) блока:
1 2 3 4 5 6 7 8 9 10 11 12 |
.selectbox { left: calc(var(--mouse-x1)); top: calc(var(--mouse-y1)); width: calc((var(--mouse-x2) - var(--mouse-x1))); height: calc((var(--mouse-y2) - var(--mouse-y1))); color: rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.1); border: 2px solid currentColor; position: absolute; transition: opacity 0.3s ease-in-out; } |
Прослушиваем события мыши и обновляем точки мыши соответственно:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
document.documentElement.style.setProperty( '--mouse-x1', ctx.selectArea.x1 + 'px', ) document.documentElement.style.setProperty( '--mouse-y1', ctx.selectArea.y1 + 'px', ) document.documentElement.style.setProperty( '--mouse-x2', ctx.selectArea.x2 + 'px', ) document.documentElement.style.setProperty( '--mouse-y2', ctx.selectArea.y2 + 'px', ) |
Заключение
Если вы похожи на меня и не видели пользы переменных css или не знали, что они существуют, я надеюсь, что этот пост открыл вам дверь и вы начнете исследовать их варианты использования.
Я случайно наткнулся на JavaScript API, но этот API открыл мне глаза на их использование в реальном мире, и я с нетерпением жду возможности применить их в будущем проекте.
Автор: Tim Deschryver
Источник: //dev.to
Редакция: Команда webformyself.