От автора: сначала, когда я услышал о переменных CSS, я был настроен немного скептически. Зачем кому-то использовать их, если есть такие языки расширения, как scss, sass, less и stylus. Через несколько лет я начал замечать, что все больше и больше людей используют их, пишут об этом и говорят об этом. Я что-то упустил из виду… Это заняло какое-то время, но после того, как я использовал их здесь и там, меня зацепило. В этом посте я расскажу о том, что убедило меня продолжить изучение переменных css и начать их использование в проектах.
Использование
Чтобы объявить переменные, определите их в селекторе и добавьте к имени переменной два дефиса (—):
div { --bgColor: deeppink;
}
Распространенный подход заключается в определении переменных с помощью селектора :root, таким образом вы определяете глобальную переменную:
:root { --bgColor: teal;
}
Чтобы применить переменные, используйте функцию var():
div { background: var(--bgColor);
}
Функция var() принимает второй параметр, который используется в качестве запасного варианта , если переменная не объявлена:
header { background: var(--bgColor); color: var(--color, beige);
}
Фрагменты кода выше дают:
Темы
С помощью переменных CSS создание темы становится простым. В зависимости от класса body мы можем установить для переменной соответствующее значение:
body.sunrise { --background-color: #fff; --text-color: #333;
} body.sunset { --background-color: #333; --text-color: #fff;
}
Затем мы можем использовать эти переменные при стилизации элементов:
html,
body { background: var(--background-color); color: var(--text-color);
}
Если класс body изменится с sunriseor на sunset, переменные css будут каскадными для всех селекторов. В нашем случае мы перейдем к светлой или темной теме:
JavaScript API
Это, на мой взгляд, лучшая часть. Переменные CSS имеют JavaScript API для получения и установки переменных. Чтобы получить переменную, используйте метод getPropertyValue:
getComputedStyle(document.documentElement).getPropertyValue('--color')
Чтобы получить значение из элемента, сначала выберите этот элемент с помощью querySelector:
getComputedStyle(document.querySelector('h1')).getPropertyValue('--color')
Чтобы установить значение переменной, используйте style.setProperty:
document.documentElement.style.setProperty('--color', 'red')
Чтобы установить значение для элемента:
document.querySelector('h1').style.setProperty('--color', 'blue')
Этот API открывает некоторые возможности для чистого использования переменных CSS.
Я столкнулся с этим примером использования Дэвида К. пару дней назад в одной из его демонстраций XState по адресу https://codepen.io/davidkpiano/pen/zWrRye. Он использует переменные css для создания поля выбора, когда пользователь перемещает мышь по экрану.
CSS окна выбора использует переменные, чтобы определить четыре угла (на основе начальной точки и текущей позиции мыши) блока:
.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;
}
Прослушиваем события мыши и обновляем точки мыши соответственно:
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
Источник: https://dev.to
Редакция: Команда webformyself.
