Переменные

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

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

Обслуживание кода CSS сложнее, чем это должно быть. Нам, как веб-разработчикам нужно помнить целый ряд значений и цвета hex/RGB или постоянно для цвета элемента применять значение #334. А если вам нужен цвет #074195 или в некоторых местах значение RGB (21,21,2 ). Страница «Цвет CSS» поможет нам при написании цветов для таблицы 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 {
  var-mycolor: #334; /* создать переменную с цветом */
}
section {
  border-color: var(mycolor); /* применить переменную */
}
h1 {
  color: var(mycolor); /* применить переменную */
}
p {
  background-color: var(mycolor); /* применить переменную */
}

Еще пример:

#calcWidth {
  var-width: 100px; /* создать переменную с шириной */
}
#calcWidth div {
  outline:1px black solid;
  height:40px;
  text-align: center;
  width: calc(var(width) * 1); /* применить переменную */
}
#calcWidth div:nth-child(2) {
  width: calc(var(width) * 2); /* применить переменную */
}
#calcWidth div:nth-child(3) {
  width: calc(var(width) * 3); /* применить переменную */
}

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