От автора: CSS переменные или пользовательские свойства CSS позволяют работать с переменными прямо в CSS. Они отлично помогают в сокращении повторяющегося кода CSS, а также это мощный инструмент таких эффектов, как переключение темы. У CSS переменных есть функции полифилов. Они работают по принципу DRY – не повторяйся. С помощью CSS переменных вы можете локализовывать значения и упрощать первичную разработку, итерационное тестирование и в последствии обслуживание. Они официально включены в CSS спецификацию. Перейдем к деталям.
Стандартное объявление
Любое CSS свойство — color, size, position и т.д. — может храниться в CSS переменной. Имена переменных начинаются с префикса —. Объявляются они путем добавления к элементу, как и с другими стилями:
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Define CSS variables and scope */ :root { --maincolor: black; --secondarycolor: red; } /* Use CSS Variables */ body { background: var(--maincolor); color: white; } body p { background: var(--secondarycolor); } |
Здесь я определил 2 CSS переменные со значениями цветов внутри селектора :root. Переменные объявляются внутри и распространяются на область видимости селектора. В отличие от других CsS свойств, CSS переменные регистрозависимы. Поэтому —maincolor и —Maincolor будут 2 разные переменные.
Чтобы использовать 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 |
/* Define CSS variables and scope */ :root { --darkfont: green; --darkborder: 5px dashed var(--darkfont); } /* Use CSS Variables */ .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 border will be 1px solid darkred */ } |
Мы определили одну и ту же переменную –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; } |
Преимущества в медиа запросах
Этот тип шаблона можно использовать для медиа запросов CSS Variables, где все изменения происходят в браузере, а переменные знают об условиях, в которых они используются. Это позволит не повторять селекторы, а не свойства.
Пример:
|
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); /* Normal value as fallback value */ font-size: var(--defaultsize, var(--fallbacksize, 36px)); /* var() as fallback value */ |
В качестве фолбека значений для браузеров без поддержки можно использовать:
|
1 2 3 |
background: white; /* background value for browsers that don't support CSS variables */ background: var(--primarybg, white); |
И все счастливы!
Поддержка в браузерах
Много зеленого, можно потестировать.
Заключение
Если вы дочитали статью, надеюсь, вы уже в предвкушении от изучения преимуществ CSS переменных. Попробуйте их в своем проекте! Если вам понравился блог, пожалуйста, оставляйте свои мысли и мнения, а также проблемы и вопросы в комментариях.
Автор: Nirazan Basnet
Источник: //blog.yipl.com.np/
Редакция: Команда webformyself.
