От автора: Переменные CSS или «Пользовательские свойства CSS». Они позволяют работать с переменными непосредственно в CSS. Они очень полезны для уменьшения повторения в CSS, а также для создания мощных эффектов во время выполнения, таких как переключение тем. Они соответствуют принципу DRY — Don’t Repeat Yourself.
С помощью переменных CSS вы можете локализовать значения и упростить начальную разработку, итеративное тестирование и последующее обслуживание — все за один раз. Они также официально являются частью спецификации CSS. Итак, давайте рассмотрим их.
Основное объявление
Любое — цвет, размер, положение и т. д. — свойство CSS может быть сохранено в переменной CSS. Их имена имеют префикс —, и вы объявляете их, добавляя переменные к элементу, как вы добавляете другие его стили:
/* Определяем переменные 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 и использовать значение этой переменной.
a { color: var(--maincolor); text-decoration-color: var(--secondarycolor); }
Еще одна интересная особенность переменных CSS — мы можем даже установить значение одной переменной для другой переменной CSS, полностью или частично:
/* Определяем переменные CSS и область действия */
:root { --darkfont: green; --darkborder: 5px dashed var(--darkfont);
}
/* Используем переменные CSS */
.container { color: var(--darkfont); border: var(--darkborder);
}
Область действия и каскад
Переменные CSS действуют как обычные свойства стиля; переменная доступна в любом месте вниз по каскаду. Например, эти переменные могут использоваться чем угодно на всей странице:
root { --darkborder: 5px solid black;
}
body { --darkborder: 1px solid darkred;
}
img{ border: var(--darkborder); /* граница для img будет - 1px solid darkred */
}
Здесь мы определили одну и ту же переменную CSS —darkborder дважды внутри двух разных селекторов. Из-за каскадных правил та, что находится внутри селектора body, имеет более высокую специфичность и применяется при для элемента img.
Переменные CSS также наследуются по умолчанию, поэтому значение свойства CSS, определенного в родительском элементе, также применяется к дочерним элементам при использовании в этих элементах.
:root { --myborder: 2px solid black;
}
ul { margin: 0; border-left: var(--myborder);
}
ul ul { margin-left: 30px;
}
Но мы также можем отключить свойство наследования, установив для него специальное значение «initial» внутри нужного селектора. Из приведенного выше примера:
:root { --myborder: 2px solid black;
}
ul { margin: 0; border-left: var(--myborder);
}
ul ul { --myborder: initial; /* reset --myborder variable */ margin-left: 30px;
}
Преимущества в медиа-запросах
Мы можем использовать этот тип шаблона для медиа-запросов, где все изменения происходят в браузере, и переменные знают об условиях, при которых они используются.
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 не определена
background: var(--primarybg, white); /* Обычное значение в качестве резервного варианта */ font-size: var(--defaultsize, var(--fallbacksize, 36px)); /* var() в качестве резервного варианта */
Чтобы предоставить резервные значения для браузеров, в которых нет поддержки этой функции, вы можете сделать что-то вроде следующего:
background: white; /* значение background для браузеров, которые не поддерживают переменные CSS */ background: var(--primarybg, white);
Теперь все будут счастливы! Поддержка браузерами. Как видите, здесь довольно много зеленого.
Заключение
Я надеюсь, что вы будете рады изучить преимущества CSS-переменных. Поэтому я предлагаю вам попробовать их в своем проекте и наслаждаться!
Автор: Nirazan Basnet
Источник: https://medium.com
Редакция: Команда webformyself.
