Переменные

Переменные в CSS — предназначены для повторного использования значений стиля. Например, если указан один и тот же цвет #334 для разных свойств:

section {
  border-color: #334;
}
h1 {
  color: #334;
}
p {
  background-color: #334;
}

Обслуживание кода CSS сложнее, чем это должно быть. Нам, как веб-разработчикам нужно помнить целый ряд значений и цвета hex/RGB или постоянно для цвета элемента применять значение #334. А если вам нужен цвет #074195 или в некоторых местах значение RGB (21,21,2 ). Страница «Цвет» поможет нам при написании цветов для таблицы CSS, а если нет доступа к интернету? Все цвета трудно запомнить, переменные CSS могут решить эту проблему. Мы определим цвет #334 в качестве одной переменной и можем использовать его по всему коду CSS. Это первый признак реализации предварительного компилирования в CSS.

Например, в LESS уже существуют переменные:

@mycolor: #334;
section {
border-color: @mycolor;
}
h1 {
  color: @mycolor;
}
p {
  background-color: @mycolor;
}

или переменные в SASS:

$mycolor: #334;
section {
border-color: $mycolor;
}
h1 {
  color: $mycolor;
}
p {
  background-color: $mycolor;
}

В проекте спецификации W3C CSS Variables показано, как мы можем писать код CSS с переменными. Согласно документу W3C, имя переменой начинается с двух дефисоминусов --. Значение переменной начинаться с префикса var.

Поддержка

Таблица поддержки браузерами: “Переменные”

Пример:

:root {
  --mycolor: #ccc; /* создать переменную с цветом */
}
section {
  border-color: var(--mycolor); /* применить переменную */
}
h1 {
  color: var(--mycolor); /* применить переменную */
}
p {
  background-color: var(--mycolor); /* применить переменную */
}

Еще пример:

#calcWidth {
  --width: 100px; /* создать переменную с шириной */
  --mycolor: #334; /* создать переменную с цветом */
  --mycolor-two: #0ff;

}
#calcWidth div {
  outline:1px black solid;
  height:40px;
  text-align: center;
  width: calc(var(--width) * 1); /* применить переменную */
  background: var(--mycolor);
}
#calcWidth div:nth-child(2) {
  width: calc(var(--width) * 2); /* применить переменную */
  background: var(--mycolor-two);
}
#calcWidth div:nth-child(3) {
  width: calc(var(--width) * 3); /* применить переменную */
}

Это не такой короткий код как у LESS или SASS, но это большой шаг вперед, который позволит облегчить обслуживание CSS.