Секретный рецепт пользовательских свойств CSS

Примерно в 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;
  }
}