Примерно в 2017 году появились пользовательские свойства CSS, или, как их еще называют, переменные CSS. В то время я был скептиком и не стал исследовать. Потому что у меня уже были переменные в препроцессоре.
Но оказывается, что преимуществ у CSS Variable в разработке довольно много. Таким образом, переменные в препроцессоре являются статичными, но не для CSS Variables.
Переменная CSS является динамической
Статический означает, что мы не можем изменить значение переменной в любом месте и в любое время. В приведенном ниже примере сравнивается объявление переменных.
Как объявляются переменные в SASS
$background: tomato;
.element {
background: $background;
}
Результат компиляции
.element {
background: tomato;
}
Как объявляются переменные в CSS
:root {
--background: tomato
}
.element {
background: var(--background);
}
Результат компиляции CSS Variable останется таким же, как и исходный код. Чтобы использовать значение CSS Variable, мы встраиваем его, используя var()
в CSS свойство в качестве значения. Ниже я постараюсь показать, почему CSS Variable является динамической.
:root {
--background: tomato;
}
.element {
background: var(--background);
}
.use-teal {
--background: teal;
}
<div class="element">Tomato</div>
<div class="element use-teal">Teal</div>
Из приведенного примера видно, что .element
будет иметь томатный фон, а .element .use-teal
будет иметь тиловый фон. Таким образом, мы можем изменить значение переменной в любом месте и в любое время.
Мы постараемся продолжить рассмотрение некоторых способов встраивания значений переменных.
:root {
--background: tomato;
}
.element {
background: var(--background);
}
<div class="element">Tomato</div>
<div class="element" style="--background: teal">Teal</div>
Если посмотреть на то, как я встроил значение переменной выше. Это означает, что встраивание значения не ограничивается только изменением его в файле CSS. Но мы также можем изменить его с помощью атрибутов HTML.
Изменение стоимости с помощью JS
Мы также можем изменить значение переменной с помощью JS. Вот пример того, как значение переменной изменяется с помощью события JS.
:root {
--background: tomato;
}
.element {
background: var(--background);
}
<div class="element">Hanya sebuah teks</div>
<button onclick="changeColor()">Ubah warna</button>
const changeColor = () => {
const randomColor = Math.floor(Math.random()*16777215).toString(16);
const el = document.querySelector('.element');
el.style.setProperty('--background', '#' + randomColor);
}
Синергия с препроцессором CSS
Существование переменных в CSS не означает, что мы отказываемся от существующих переменных, используемых препроцессором. Мы все еще можем использовать их для статических значений.
Смешивание этих двух типов переменных все еще очень возможно. Как в приведенном ниже примере.
$button-sml = 1em;
$button-mid = 1.5em;
.btn {
--button-size: #{$button-sml);
font-size: var(--button-size);
}
@media screen and (min-width: 600px) {
.btn {
--button-size: #{$button-mid};
}
}
Ограничения
Функция, помимо преимуществ, конечно же, имеет и ограничения. Некоторый синтаксис, который нельзя использовать с CSS Variable.
:root{
--min-width: 576px;
--child-number: 3;
}
@media screen and (min-width: var(--min-width) ) {
li:nth-child(var(--child-number)) {
border-bottom: solid 2px teal;
}
}