Переменные CSS – это пользовательские переменные, которые вы можете создавать самостоятельно и использовать многократно в своей таблице стилей.
В этой статье я покажу вам, как можно создать переменные CSS в псевдоселекторе :root, а также, как можно получить к ним доступ с помощью функции var().
Как создать пользовательскую переменную CSS
Вот так выглядит базовый синтаксис для определения пользовательской переменной CSS:
--css-variable-name: css property value;Лучше всего определять все переменные в самом начале таблицы стилей. Если речь идет о каких-то больших проектах, то в таком случае создают отдельный файл для хранения пользовательских переменных цвета, чтобы их можно было использовать многократно в других таблицах стилей.
Если вам нужно получить доступ к этой переменной, то вам понадобиться функция var(). Вот так выглядит ее базовый синтаксис:
css property: var(--css-variable-name);В этом примере я хочу создать пользовательские переменные цвета фона и текста, которые я потом смогу использовать в таблице стилей. Я назову эти переменные так: --main-bg-color и --main-text-color.
--main-bg-color: #000080;
--main-text-color: #fff;Я хочу поместить эти переменные внутри псевдоселектора :root, который является корневым элементом в моем HTML-документе.
:root {
--main-bg-color: #000080;
--main-text-color: #fff;
}А в селекторе body я буду ссылаться на эти переменные с помощью функции var().
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}Вот так выглядит рабочий пример:
Если бы я хотел добавить еще больше содержимого на страницу, то мог бы еще раз воспользоваться этими переменными в таблице стилей и избежать, таким образом, ненужного повторения:
.example-class-1 {
background-color: #000080;
display: flex;
flex-direction: column;
}
.example-class-2 {
font-size: 2.1rem;
color: #fff;
}
.example-class-3 {
background-color: #000080;
color: #fff;
border: 2px solid black;
}Во втором примере я разместил на странице 6 красных, зеленых и синих блоков. Для начала я создал HTML-разметку для этих блоков.
<div class="box-container">
<div class="box red-box">Box 1</div>
<div class="box green-box">Box 2</div>
<div class="box blue-box">Box 3</div>
</div>
<div class="box-container">
<div class="box blue-box">Box 4</div>
<div class="box green-box">Box 5</div>
<div class="box red-box">Box 6</div>
</div>После чего я создал набор пользовательских переменных цвета (красный, зеленый и синий).
:root {
--maroon-red: #800000;
--dark-green: #013220;
--navy-blue: #000080;
--white: #fff;
}А в самом конце я применил эти переменные к своим блокам с помощью функции var().
.red-box {
background-color: var(--maroon-red);
}
.green-box {
background-color: var(--dark-green);
}
.blue-box {
background-color: var(--navy-blue);
}Вот так выглядит окончательный результат:
Как присвоить имя переменной CSS
Когда дело доходит до присвоения имен переменным, вам стоит отдать предпочтение коротким и информативным наименованиям, чтобы другие разработчики могли разобрать, что это за переменная.
Вот так выглядит пример не самого лучшего имени переменной:
background-color:var(--color);Что такое --color?
Это какой-то оттенок красного? Или зеленого? Или, может, синего? Или какого-то другого цвета?
Это основной цвет фона или, может быть, текста?
Так делать не стоит, поскольку другим разработчикам придется возвращаться в начало и разбираться, что это такое.
Вот еще один пример. Допустим, вы создали пользовательские переменные CSS для разных оттенков цвета, тогда вы могли бы их назвать вот так:
:root {
--maroon-red: #800000;
--light-red: #ff0000;
--crimson-red: #e32636;
}У всех разработчиков свой стиль именования переменных, но главное помнить, что важно давать переменным такие имена, которые бы четко их описывали.
Заключение
Переменные CSS – это пользовательские переменные, которые вы можете создавать самостоятельно и использовать их многократно в своей таблице стилей.
Вот так выглядит базовый синтаксис для определения пользовательской переменной CSS:
--css-variable-name: css property value;Если вам нужно получить доступ к этой переменной, то вам понадобиться функция var(). Вот так выглядит ее базовый синтаксис:
css property: var(--css-variable-name);У всех разработчиков свой стиль именования переменных, но главное помнить, что важно давать переменным такие имена, которые бы четко их описывали.
Я надеюсь, что вам понравилась эта статья, и я желаю вам удачи на вашем пути изучения CSS.
