Пользовательские свойства (широко известные как переменные CSS) — это современное дополнение к CSS. Если вы работали с языками программирования, такими как JavaScript, Python и т.д., вы знаете, что переменные чрезвычайно полезны.
Переменная — это имя, которое ссылается на значение, и, используя переменные в CSS, мы значительно сокращаем повторение кода и создаем гораздо более удобные в обслуживании таблицы стилей.
- Определение переменной CSS
- Определение переменных в элементах
- Область действия переменной
- Бонусные советы
- Чувствительность к регистру
- Использование переменных в HTML
- Использование переменных внутри переменных
- Использование переменных с математикой
- Использование переменных с медиазапросами
- Установка запасного значения для var()
- Резюме
- Заключение
- 🌎 Let’s Connect
Определение переменной CSS
Мы определяем переменную с помощью имени, начинающегося с двойного дефиса (--variable-name), за которым следует двоеточие и значение (любое допустимое значение CSS):
:root {
--main-color: green;
}
Псевдокласс :root — это специальный селектор, который применяет стиль глобально к HTML-документу. Подробнее об этом позже!
Доступ к переменной можно получить с помощью var():
p {
color: var(--main-color)
}
Определение переменных в элементах
Мы можем определить CSS-переменные внутри любого элемента:
:root {
--default-padding: 30px 30px 20px 20px;
}
body {
--main-bg-color: black;
}
p {
--main-color: lightblue;
}
a:hover {
--main-color: red;
}
Область действия переменной
Каждая переменная доступна только для дочерних элементов селектора, в котором она определена — это и есть «область действия».
Рассмотрим это в контексте нашего предыдущего примера с использованием :root:
:root {
--main-color: green;
}
:root — это специальный псевдокласс, который ссылается на корневой элемент дерева.
В документе HTML селектор :root ссылается на элемент html. И на самом деле, он имеет более высокую специфичность, чем html, поэтому он всегда будет иметь приоритет.
Поэтому, когда переменная применяется к :root, считается, что она имеет «глобальную область видимости» & доступна для всех элементов.
Если бы мы добавили переменную к элементу main, она была бы доступна только для дочерних элементов main:
main {
--main-color: lightblue;
}
Если мы попытаемся использовать его вне этого элемента, он не будет работать.
Итак, две наши переменные выглядят следующим образом:
:root {
--main-color: green;
}
main {
--main-color: lightblue;
}
Наш --main-color будет зеленым везде в нашем документе, кроме main и любого из его дочерних элементов — они будут светло-голубыми.
Бонусные советы
Чувствительность к регистру
Переменные CSS чувствительны к регистру!
:root {
--color: green;
--COLOR: lightblue;
}
Таким образом, --color и -COLOR — это две отдельные переменные.
Использование переменных в HTML
Переменные можно использовать непосредственно в HTML, например, так:
<!--HTML-->
<html style="--size: 800px">
body {
max-width: var(--size)
}
Использование переменных внутри переменных
Переменная может быть использована внутри другой переменной:
--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);
Использование переменных с математикой
Переменные CSS можно использовать с функцией calc():
--input-width: 500px;
max-width: calc(var(--input-width) / 2);
Использование переменных с медиазапросами
Мы можем сделать переменные CSS условными с помощью медиазапросов!
Следующий код изменяет значение padding в зависимости от размера экрана:
:root {
--padding: 25px
}
@media screen and (max-width: 750px) {
--padding: 10px
}
Установка запасного значения для var()
При использовании функции var() вы можете определить второй параметр. Это значение будет использоваться, если пользовательское свойство не будет найдено:
width: var(--custom-width, 33%);
Резюме
Я уверен, что вы можете сказать, что использование переменных CSS сделает ваш код гораздо более читабельным и удобным для сопровождения.
Они также значительно улучшают простоту внесения изменений в большие кодовые базы. Если вы зададите все константы в отдельном CSS-файле, вы не будете продираться через тысячи строк кода, когда захотите сделать простое изменение!
Заключение
Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь
🌎 Let’s Connect
-
Портфолио
-
Twitter
-
LinkedIn
-
Hashnode
-
Devto
-
Medium
-
Github
-
Codepen