Использование переменных в CSS

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

Объявление переменной:

element {
  --main-bg-color: brown;
}

Использование переменной:

element {
  background-color: var(--main-bg-color);
}

Первый шаг с CSS Переменными

Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

Мы применим его к этому HTML:

<div>
  <div class="one"></div>
  <div class="two">Text <span class="five">- more text</span></div>
  <input class="three" />
  <textarea class="four">Lorem Ipsum</textarea>
</div>

что приводит нас к этому:

Обратите внимание на повторения в CSS. Коричневый фон установлен в нескольких местах. Для некоторых CSS объявлений можно указать этот цвет выше в каскаде и наследование CSS решит эту проблему. Но для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдоклассе :root, автор CSS может избежать ненужных повторений, используя эту переменную.

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

<div>
  <div class="one"></div>
  <div class="two">Text <span class="five">- more text</span></div>
  <input class="three" />
  <textarea class="four">Lorem Ipsum</textarea>
</div>

Это приводит к тому же результату, что и предыдущий пример, но позволяет объявить желаемое свойство только один раз.

Наследование переменных в CSS и возвращаемые значения

Пользовательские свойства могут наследоваться. Это означает, что если не установлено никакого значения для пользовательского свойства на данном элементе, то используется свойство его родителя:

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

со следующим CSS:

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

В результате var(--test) будет:

• для элемента с классом class="two": 10px
• для элемента с классом class="three": 2em
• для элемента с классом class="four": 10px (унаследовано от родителя)
• для элемента с классом class="one": недопустимое значение, что является значением по умолчанию для любого пользовательского свойства.

Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.

Первый аргумент функции это имя пользовательского свойства. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда пользовательское свойство является не действительным. Например:

.two {
  color: var(--my-var, red); /* red если --my-var не определена */
}

.three {
  background-color: var(
    --my-var,
    var(--my-background, pink)
  ); /* pink если --my-var и --my-background не определены */
}

.three {
  background-color: var(
    --my-var,
    --my-background,
    pink
  ); /* "--my-background, pink" будет воспринят как значение в случае, если --my-var не определена */
}

Обоснованность и полезность

Понятие классической концепции CSS, связанность с каждым свойством, не очень удобно в плане пользовательских свойств. Когда значения пользовательских свойств обрабатываются, браузер не знает где они будут применяться, поэтому нужно учитывать почти все допустимые значения.

К сожалению, эти значения могут использоваться через функциональную запись var() , в контексте где они, возможно, не имеют смысла. Свойства и пользовательские переменные могут привести к невалидным выражениям CSS, что приводит к новой концепции валидности во время исполнения.

Совместимость с браузерами