Краткое руководство по переменным CSS и основам их использования.
Вы когда-нибудь устали повторно использовать кучу свойств CSS снова и снова в большом проекте? Или, что еще хуже, менять каждого из них, когда его об этом просят? На протяжении десятилетий это было большой проблемой для веб-разработчиков, что привело к тому, что мы перешли на препроцессоры, такие как SASS. Уже нет! CSS теперь предоставляет переменные изначально без необходимости повышения уровня для каких-либо препроцессоров. Классно, правда? Давайте начнем, чтобы увидеть, как мы можем внедрить это в наши проекты.
TL; DR
В этой статье мы рассмотрим-
1. Как использовать переменные CSS в нашем проекте.
2. Некоторые концепции, такие как резервное копирование и наследование .
3. Как использовать переменные CSS в Javascript.
Основное использование
Переменные в CSS объявляются с использованием префикса - перед именем.
Объявление переменной: element-name{
--main-bg: black;
}
Здесь имя переменной --main-bg, а ее значение black.
Доступ к переменным осуществляется с помощью функции var().
Доступ к переменной: element-name{
background-color: var(--main-bg);
}
Здесь значение черного применяется к CSS-атрибуту background-color.
Теперь, когда мы знаем, как определить и получить к нему доступ, давайте посмотрим на пример его использования .
В приведенном ниже примере есть два файла: index.html (не перегружайте его, большинство из них - просто служебные, и их рекомендуется включать) и style.css. Мы бы определяли наш CSS в файле style.css-
index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>CSS Variables Tutorial</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”first-level”>
<div class=”second-level”>
<div class=”third-level-1"></div>
<div class=” third-level-2"></div>
</div>
</div>
</body>
</html>
style.css
:root {
--main-bg-color: brown;
}
.first-level {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.second-level {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.third-level-1 {
background-color: white;
color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.third-level-2 {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
Ладно, у нас тут много чего происходит, верно? Шучу, это просто набор объявлений классов CSS, в которых мы использовали объявления переменных CSS и их извлечение. Давайте разберемся по порядку.
Во-первых, у нас есть псевдокласс :root. Это используется в основном, чтобы убедиться, что все элементы в HTML могут получить доступ к переменным, объявленным внутри него. Однако не обязательно использовать :root для объявления переменной, мы также можем объявлять переменные в других классах, мы вернемся к этому позже.
Мы определили цвет, который можно использовать во многих классах, и дали ему имя--main-bg-color. Его использование присутствует в .first-level, .third-level-1 и .third-level-2.
Наследование CSS и резервные варианты
Все еще не знаете, как использовать псевдокласс :root? Не волнуйтесь! Пример ниже проясняет концепции еще больше. Давайте определим переменную в одном классе и будем использовать ее в другом классе. Здесь у нас есть контейнер div, который содержит еще div класса hero и тег paragraph.
<div class=”container”>
<div class=”hero”>
<p>I am the hero paragraph</p>
</div>
<p> I am the container paragraph</p>
</div>
Давайте теперь определим для него CSS -
.hero{
--bold-style: bold;
}
.container, .hero{
font-weight: var(--bold-style);
}
Результат выглядит примерно так:
I am the hero paragraph I am the container paragraph
Обратите внимание, что абзац за пределами hero div не получил стиля, даже когда мы применили переменную к обоим классам. Это связано с наследованием переменных, при котором переменная для стилизации дочернего div не будет иметь никакого влияния на стиль родительского div.
Чтобы преодолеть это ограничение, мы можем использовать концепцию резервных копий. Запасные варианты - это стили, которые применяются к тем классам, на которые не влияют вызовы переменных.
Давайте теперь изменим наш CSS на следующий:
.container, .hero{
font-weight: var(--bold-style, bold);
}
Теперь мы можем увидеть желаемый результат -
I am the hero paragraph I am the container paragraph
Здесь резервные значения применяются к классам, в которых переменные undefined. функция var() может иметь несколько уровней отката, но это на другой раз.
CSS в Javascript
Мы зашли так далеко с переменными, так почему бы не добавить к ним некоторые приправы Javascript? Вот несколько примеров того, как мы можем это сделать:
// get variable from inline style element.style.getPropertyValue(“--my-var”); // get variable from wherever getComputedStyle(element).getPropertyValue(“--my-var”); // set variable on inline style. Here jsVar is some variable. element.style.setProperty(“--my-var”, jsVar + 4);
Вот и все! Пора поработать руками с этой новой и мощной функцией в наших следующих проектах, без необходимости выбирать SASS или SCSS!
Источники-
Видео на Youtube от DesignCourse:
https://www.youtube.com/watch?v=GZTZTZ69bqY
Веб-сайт разработчиков Mozilla:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
