От автора: изучаем основы того, как использовать CSS переменные: область видимости, ограничения и взаимодействия с JavaScript, включая интерактивные примеры. Очистите свой Codepen и подготовьте его для самостоятельного выполнения заданий.
Почти все языки программирования изначально поддерживают использование переменных, но не CSS. Вначале он их не поддерживал. До сих пор.
Действительно, они фактически являются не «переменными», а пользовательскими свойствами CSS. Да, название технически неправильно, но более запоминающееся 
CSS — грязный
Любой, кто должен был работать с CSS, знает, как сложно сохранять код аккуратным. Например, использование одних и тех же значений в разных правилах является болью для поддержания и фактором, провоцирующим ошибки (т. е. опечатки). Много раз мы предпочитали использовать старые добрые «найти и заменить» в текстовом редакторе, и это до определенного момента может работать. Но чем крупнее проект, тем легче сделать изменение, которое испортит что-то еще.
Но что насчет…?
Вы могли бы подумать: «переменные в CSS? Зачем? Если у меня уже есть они через мой любимый препроцессор»
Да, у нас есть инструменты, которые помогут нам с этими повторяющимися задачами. Препроцессоры, такие как SASS и Stylus, поддерживают переменные. Это позволяет более эффективно разрабатывать и обслуживать крупномасштабное приложения. Однако их недостатком является сложность внесения изменений во время выполнения.
Препроцессоры «компилируются» в стандартный код CSS. Альтернативой было бы генерировать код динамически по мере необходимости. Однако это будет очень сложно и медленно.
Причины использования переменных в CSS
Разумный код
Делать изменения в крупных проектах намного проще
Уменьшается риск опечаток
Возможность внесения изменений во время выполнения
Каковы эти пользовательские свойства CSS?
В принципе, были добавлены эти две функции:
Возможность присваивать произвольные значения свойствам с полностью настраиваемыми именами
Функция var() для получения значения этих свойств.
Вот простой пример:
:root { --brand-color: #666;
} #main { color: var(--brand-color);
}
Где —brand-color — это свойство, которое мы определили со значением #666. И var() — это функция, которая позволяет нам получить доступ к указанному ранее значению, что дает color: #666;.
Синтаксис
Синтаксис очень прост: все свойства должны начинаться с двойного дефиса (-). Свойства чувствительны к регистру, поэтому -brand-color отличается от -Brand-color, которое в свою очередь отличается от -Brand-Color.
Я знаю, что вы можете подумать, что синтаксис непривлекателен (и вы будете правы). Но наличие двойного дефиса обеспечивает ретро-совместимость с браузерами, которые еще не поддерживают эти функции.
Каскады / область видимости
Можно определить свойства как «локальные» или «глобальные». Переменные доступны в пределах области, где они были определены. Все дочерние элементы могут получить доступ к свойствам родителя, но не наоборот. Пользовательские свойства следуют тем же правилам, что и каскадные стили. Мы можем определить одно и то же свойство на разных уровнях специфичности:
<style> :root { --text-color: green; } div { --text-color: blue; } .error { --text-color: network; } * { color: var(--text-color); }
</style> <p> I'm green because I got my color from root</p>
<div>I got blue from div selector</div>
<div class="error"> I'm red because of the .error rule <p>Another red here because of inheritance!</p>
</div>
Обратите внимание: root — это самый верхний элемент (эквивалентный глобальной области). Свойству с таким же именем может быть присвоено другое значение в дочернем элементе. Интересно, не так ли? Мы также можем изменять значения в медиа-запросах,
:root { --gutter: 10px 0;
}
main { padding: var(--gutter);
}
@media (min-width: 600px) { :root { --gutter: 0 0 0 16px; }
}
Наиболее известные препроцессоры CSS не позволяют вам определять переменные в медиа-запросах. Вау! Можно даже определить свойства от других существующих свойств:
:root { --brand-color: red; --header-text-color: var(--brand-color);
}
Обратите внимание, что это не работает с Microsoft Edge 15 из-за известной ошибки. Хотя это не рекомендуется, вы можете определять свойства в тегах style, <html style = «—color: red;»>.
var()
Согласно MDN, функция var() имеет следующий синтаксис,
var( <custom-property-name>[, <declaration-value>]? )
Где custom-property-name — это имя свойства, которое вы определяете. Если оно недопустимо или не существует, вместо него будет использоваться declaration-value. Мы можем указать несколько разделенных запятыми значений, как в случае с семействами шрифтов. Будьте внимательны с запятыми. Например, чтобы указать более двух значений для полей, сделайте так:
.foo { padding: var(--gutter, 10px 0 0 5px);
}
—gutter — это основное значение, а «10px 0 0 5px» используется, если -gutter недействительно или вообще не существует.
Ограничения
Функция var() не поддерживает строчную интерполяцию или конкатенацию. В отличие от препроцессора, функция var() не может использоваться для определения имен свойств.
Круговые зависимости
У нас могут быть зависимости между свойствами, как в следующем примере,
:root { --main-color: #c06; --accent-background: linear-gradient(to top, var(--main-color), white);
}
Однако круговые зависимости не допускаются. Например,
:root { --one: #c06; --two: #ccc; --one: calc(var(--two) + 20px); --two: calc(var(--one) - 20px);
}
В этом случае как –one, так и –two будут считаться недействительными. Начальные значения не перезаписываются и остаются неизменными. Таким образом, они должны иметь начальное значение вместо указанного значения.
Составление значений с помощью calc()
Функция calc() используется для выполнения вычислений и определения значений CSS. Она поддерживается всеми современными браузерами. Вы можете объединять ее с var() для составления значений на лету,
header { --gutter: 20; padding: calc(var(--gutter) * 1px);
}
В этом случае —gutter определяется как один токен с числовым значением 20. Но для поля требуется также единица измерения (например, px). Поскольку вы не можете конкатенировать строки, вы можете вместо этого умножить на «1px», чтобы получить синтаксически правильное значение.
Составление с помощью JavaScript
Чтобы получить значение пользовательского свойства в JavaScript, используйте метод getPropertyValue() объекта CSSStyleDeclaration.
<style> :root {--brand-color: cyan; } p { color: var(--brand-color); }
</style> <p>This text is cyan</p> <script> const styles = getComputedStyle(document.documentElement); const colorValue = styles.getPropertyValue('--brand-color'); // colorValue = 'cyan';
</script>
С другой стороны, для определения заданного значения мы используем метод setProperty() также из объекта CSSStyleDeclaration.
<style> :root {--brand-color: cyan; } p { color: var(--brand-color); }
</style> <p>This text is red</ p> <script> document.documentElement.style.setProperty ('--brand-color', 'red');
</script>
Вы также можете определить значения свойств из значения других свойств с помощью нашего старого друга var() в setProperty().
<style> :root { --brand-color: cyan; --secondary-color: yellow; }
</style> p { color: var (--brand-color); } <p>I'm yellow!</p> <script> document.documentElement.style.setProperty ('--brand-color', 'var (--secondary-color)');
</script>
Текущая поддержка
Пользовательские свойства поддерживаются большинством современных браузеров,
У Microsoft Edge 15 есть проблемы. Обнаружены следующие ошибки:
Вложенные вычисления игнорируются
Анимация с пользовательскими свойствами может привести к сбою браузера
Вы не можете использовать эти свойства в псевдоэлементах
Ниже приведена еще одна демо-версия, немного более полная, которая поможет вам изучить некоторые возможности использования пользовательских свойств в сочетании с другими функциями:
Автор: Tony Martinez
Источник: https://nearsoft.com/
Редакция: Команда webformyself.