От автора: Переменные CSS или «Пользовательские свойства CSS». Они позволяют работать с переменными непосредственно в CSS. Они очень полезны для уменьшения повторения в CSS, а также для создания мощных эффектов во время выполнения, таких как переключение тем. Они соответствуют принципу DRY — Don’t Repeat Yourself.
С помощью переменных CSS вы можете локализовать значения и упростить начальную разработку, итеративное тестирование и последующее обслуживание — все за один раз. Они также официально являются частью спецификации CSS. Итак, давайте рассмотрим их.
Основное объявление
Любое — цвет, размер, положение и т. д. — свойство CSS может быть сохранено в переменной CSS. Их имена имеют префикс —, и вы объявляете их, добавляя переменные к элементу, как вы добавляете другие его стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Определяем переменные CSS и область действия */ :root { --maincolor: black; --secondarycolor: red; } /* Используем переменные CSS */ body { background: var(--maincolor); color: white; } body p { background: var(--secondarycolor); } |
Здесь я определил две переменные CSS, которые задаю значения цвета внутри селектора :root. Переменные определены внутри и имеют соответствующие селекторы. Обратите внимание , что переменные CSS чувствительны к регистру в отличие от других свойств CSS, так —maincolor и —Maincolor рассматриваются, как две различные переменные.
И чтобы использовать переменную CSS, нам нужно обернуть ее значение в функцию var() и передать в нее имя переменной. После этого мы можем выбрать нужное свойство CSS и использовать значение этой переменной.
|
1 2 3 4 |
a { color: var(--maincolor); text-decoration-color: var(--secondarycolor); } |
Еще одна интересная особенность переменных CSS — мы можем даже установить значение одной переменной для другой переменной CSS, полностью или частично:
|
1 2 3 4 5 6 7 8 9 10 |
/* Определяем переменные CSS и область действия */ :root { --darkfont: green; --darkborder: 5px dashed var(--darkfont); } /* Используем переменные CSS */ .container { color: var(--darkfont); border: var(--darkborder); } |
Область действия и каскад
Переменные CSS действуют как обычные свойства стиля; переменная доступна в любом месте вниз по каскаду. Например, эти переменные могут использоваться чем угодно на всей странице:
|
1 2 3 4 5 6 7 8 9 |
root { --darkborder: 5px solid black; } body { --darkborder: 1px solid darkred; } img{ border: var(--darkborder); /* граница для img будет - 1px solid darkred */ } |
Здесь мы определили одну и ту же переменную CSS —darkborder дважды внутри двух разных селекторов. Из-за каскадных правил та, что находится внутри селектора body, имеет более высокую специфичность и применяется при для элемента img.
Переменные CSS также наследуются по умолчанию, поэтому значение свойства CSS, определенного в родительском элементе, также применяется к дочерним элементам при использовании в этих элементах.
|
1 2 3 4 5 6 7 8 9 10 |
:root { --myborder: 2px solid black; } ul { margin: 0; border-left: var(--myborder); } ul ul { margin-left: 30px; } |
Но мы также можем отключить свойство наследования, установив для него специальное значение «initial» внутри нужного селектора. Из приведенного выше примера:
|
1 2 3 4 5 6 7 8 9 10 11 |
:root { --myborder: 2px solid black; } ul { margin: 0; border-left: var(--myborder); } ul ul { --myborder: initial; /* reset --myborder variable */ margin-left: 30px; } |
Преимущества в медиа-запросах
Мы можем использовать этот тип шаблона для медиа-запросов, где все изменения происходят в браузере, и переменные знают об условиях, при которых они используются.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body { --primary: #7F583F; --secondary: #F7EFD2; } a { color: var(--primary); text-decoration-color: var(--secondary); } @media screen and (min-width: 480px) { body { --primary: #F7EFD2; --secondary: #7F583F; } } |
Установка резервных значений, когда переменная CSS не определена
|
1 2 3 4 |
background: var(--primarybg, white); /* Обычное значение в качестве резервного варианта */ font-size: var(--defaultsize, var(--fallbacksize, 36px)); /* var() в качестве резервного варианта */ |
Чтобы предоставить резервные значения для браузеров, в которых нет поддержки этой функции, вы можете сделать что-то вроде следующего:
|
1 2 3 |
background: white; /* значение background для браузеров, которые не поддерживают переменные CSS */ background: var(--primarybg, white); |
Теперь все будут счастливы! Поддержка браузерами. Как видите, здесь довольно много зеленого.
Заключение
Я надеюсь, что вы будете рады изучить преимущества CSS-переменных. Поэтому я предлагаю вам попробовать их в своем проекте и наслаждаться!
Автор: Nirazan Basnet
Источник: //medium.com
Редакция: Команда webformyself.
