Переменные в CSS: сколько вы ещё планируете ждать?
Сергей Фомин
Переменные в CSS
Сколько вы ещё планируете ждать?
Переменная
size = 2;
width = size * 2;
> 4
height = size + 10;
> 12
Переменная
size = 10;
width = size * 2;
> 20
height = size + 10;
> 20
Как с этим обстоят дела в CSS?
Препроцессоры
$base-color: #c6538c;
$normal-size: 18px;
$step: 20px;
h1 {
border: 1px solid $base-color;
font-size: $normal-size;
margin-right: $step;
}
CSS Custom Properties (CSS Variables)
Пример
h1 {
--my-variable: red;
}
Пример
h1 {
--my-variable: red;
color: var(--my-variable);
}
Пример
h1 {
--my-variable: red;
color: var(--my-variable, pink);
}
Пример
h1 {
--my-variable: red;
color: var(--my-variable, pink);
}
h1:hover {
--my-variable: blue;
}
Глобальные переменные
:root {
--primary-color: red;
--self-color: blue;
}
header {
background-color: var(--primary-color);
color: var(--self-color);
}
Наследование
body {
--primary-color: red;
color: var(--primary-color);
}
<body>
<header>Red</header>
<main>Red</main>
</body>
Наследование
body {
--primary-color: red;
color: var(--primary-color);
}
header {
--primary-color: green;
}
<body>
<header>Green</header>
<main>Red</main>
</body>
Область видимости
header {
--text-color: red;
color: var(--text-color);
}
main {
color: var(--text-color);
}
<body>
<header>Red</header>
<main>Not Red</main>
</body>
Задача
:root {
--primary-color: 20px;
}
header {
background-color: red;
}
header {
background-color: var(--primary-color);
}
Математика
Препроцессоры
$base: 140px;
$width: $base / 4;
CSS-переменные
--base: 140px;
--width: calc(var(--base) / 4);
Эмуляция несуществующих свойств
header {
--box-shadow-color: yellow;
box-shadow: 0 0 30px var(--box-shadow-color);
}
header:hover {
--box-shadow-color: orange;
}
Темы: Генерация независимых стилей
<link rel="stylesheet" href="light-theme.css">
<link rel="stylesheet" href="dark-theme.css">
Темы: Глобальный класс
<body>
<h1>Title</h1>
</body>
h1 {
color: red;
}
<body class="dark-theme">
<h1>Title</h1>
</body>
body.dark-theme h1 {
color: blue;
}
Темы: Переназначение переменных
:root {
--color: red;
--size: 16px;
}
button {
color: var(--color);
font-size: var(--size);
}
body.dark-theme {
--color: white;
--size: 15px;
}
Обычно мы делаем так
.header .wrapper.wrapper--size-m {
padding: 10px;
}
@media (min-width: 768px) {
.header .wrapper.wrapper--size-m {
padding: 15px;
}
}
Так мы делаем с CSS Variables
:root {
--offset: 10px;
}
.header .wrapper.wrapper--size-m {
padding: var(--offset);
}
Так мы делаем с CSS Variables
@media (min-width: 768px) {
:root {
--offset: 15px;
}
}
SVG
<svg class="svg-with-attr" viewBox="0 0 55.867 55.867">
<path
stroke="var(--iconStroke)"
stroke-width="var(--iconStrokeWidth)"
fill="var(--iconFill)"
d="...">
</svg>
portadell
SVG
.svg-with-attr {
--iconFill: #eeeeee;
--iconStroke: #000000;
--iconStrokeWidth: 1px;
}
portadell
Цвет
/* HEX - красный, зелёный, синий */
color: #ff0000;
/* RGB - красный, зелёный, синий */
color: rgb(255, 0, 0);
/* HSL - цвет, насыщенность, свечение */
color: hsl(0, 100%, 50%);
Elad Shechter
HSL
:root {
--color: 60;
--light: hsla(var(--color), 50%, 75%, 100%);
--normal: hsla(var(--color), 50%, 50%, 100%);
--darker: hsla(var(--color), 50%, 35%, 100%);
}
Elad Shechter
Так что с препроцессорами?
Основные преимущества препроцессоров
- Переменные
- Миксины
- Вложенность при написании стилей
Основные преимущества препроцессоров
-
Переменные (CSS Custom Properties)
- Миксины
- Вложенность при написании стилей
Основные преимущества препроцессоров
-
Переменные (CSS Custom Properties)
-
Миксины (Частичная реализация в Custom Properties, Черновик @apply)
- Вложенность при написании стилей
Комбинируйте
.title {
color: var(--primary-color);
&:hover {
--primary-color: red;
}
}
Выводы
-
Переменные в CSS хорошо поддерживаются нормальными браузерами. Для остальных есть PostCSS.
-
Это лучше, чем в препроцессорах, потому что они "живые".
-
Порядок в коде. Меньше кода в медиавыражениях.
-
Темы, SVG и анимации - намного удобнее.
-
Препроцессоры умрут. Не нужно учить их синтаксис.
