Нативные переменные в CSS. Уже пора…
При работе с CSS аргументами часто может быть полезным думать о них, как о двух разных типах:
Первичные пользовательские свойства
Это свойство, которое вы можете изменять в разных селекторах, в медиа-запросах или с помощью псевдо-селекторов:hover или:focus или, например, с помощью JavaScript. Обычно она содержит одно значение:
: root { --wrapper: 900px; --guter: 10px; }
Вторичные пользовательские свойства
Это аргументы, которые вычисляются из других. Например, в коде ниже размер ячейки сетки(grid) --rowHeight — вычисляется из нескольких первичных. Результат вычисления применяется к свойству, но никогда не обновляется вручную — только пересчитывается в результате изменения первичных CSS переменных.
Может быть полезно добавлять префикс вторичным аргументам, как в этом примере, чтобы вы и другие люди, работающие с вашим кодом, знали, что их нельзя менять вручную:
:root { --wrapper: 900px; --guter: 10px; / * s-префикс обозначает вторичное пользовательское свойство * / --s-rh:calc((var(--wrapper)-(3*var(--guter)))/4); }
Единственным исключением могла бы быть ситуация, когда вам нужно изменить способ вычисления значения, но теоретически после его установки он должен быть постоянным. Это может отбить охоту у разработчиков, не знакомых с вашим кодом вносить изменения без необходимости.
Область видимости
Во моих примерах я объявляю CSS переменные в:root , который представляет собой элемент :
:root { ---bgColor: red; }
Однако, в этом нет строгой необходимости, и более того, это не очень хорошая практика .
Большинство причин, по которым не рекомендуется задавать CSS переменные в глобальной области видимости в Javascript также применимы к CSS. Если бы вы при этом захотели использовать пользовательское свойство для фона-цвета -bgColor в разных компонентах, то столкнулись бы со всеми проблемами, связанными с областью видимости. Лучше всего объявлять их в селекторе, например, если вы работаете в компонентах:
My-component { ---bgColor: red; } .some-other-component { ---bgColor: blue; }
В вышеприведенном фрагменте кода -bgColor привязан к каждому компоненту, поэтому вы можете использовать переменную с тем же именем, не опасаясь, что это повлияет на что-либо вне этого компонента.
Установка величин по умолчанию
С помощью CSS переменных вы можете установить величину(или несколько величин) по умолчанию. Это означает, что в некоторых ситуациях вам нужно только объявить свои переменные в той точке, в которой они должны измениться. В коде ниже CSS переменная -bgColor для поля объявляется только при достижении ширины в 40em — до этого она принимает значение по умолчанию(red):
В этом втором примере вы можете видеть, что селекторы h1 и p имеют разные величины по умолчанию для своего свойства цвета, но оба принимают переменную при наведении:
Использование пользовательских свойств с препроцессорными
Один из недостатков CSS-аргументов — они не работают в медиа-запросах или псевдоклассах, например:nth-child(var(-n)) не будет работать. Поэтому, скорее всего, вы все равно захотите использовать препроцессорные аргументы .
Я бы предостерег от смешивания этих двух типов пользовательских свойств, если вы не полностью понимаете их отличия. Аргументы Sass скомпилируются до того, как ваш код попадает в браузер, тогда как в CSS они не получат вычисленное значение, пока не попадут в браузер. Это означает, что в приведенном ниже коде величина ширины для.box1 будет работать, но.box2 выдает ошибку, потому что величина для -halfWidth передается браузеру в виде строки:
$width: 600px; $halfWidth: $width/2; :root { --halfWidth: $width/2; } .box1 { ширина: $halfWidth; } .box2 { width: var(--halfWidth); // это некорректно }
Однако вы можете использовать calc() , как в предыдущих примерах. Смотрите результат в ниже:
Если вы проинспектируете элемент в консоли Chrome и перейдете на вкладку «Вычисляемые стили»(Computed Styles), вы увидите, что значение ширины для.box2 не вычисляется. В нашей компании мы используем много функций Sass, например, для вычисления rem из пикселей при определении размера. Я обнаружил, что это оказалось проблемой, когда я попытался передать функцию Sass в аргумент CSS, например, --width: rem (600px) . Есть плагин PostCSS , который может преобразовывать пиксели в rem чтобы достичь желаемого результата, но мне нужно будет немного поэкспериментировать с ними, прежде чем я буду уверенно рекомендовать их использовать с CSS переменными.
Тем не менее, существуют сценарии, в которых использование препроцессорных и CSS переменных в одном блоке кода вместе имеет смысл, например, в медиа-запросах, как упоминалось ранее.
Кто уже давно занимается вёрсткой, много раз чувствовали, что CSS-код труден для правок. Например, Вам захотелось поменять цветовую гамму на всей странице. Что для этого нужно? Поменять у всех блоков один цвет на другой. Неудобно? Согласен, для этого придумали SASS и LESS , однако, это так себе выход. Например, Вам хочется заменить всю цветовую гамму через JavaScript , или увеличить ширину нескольких блоков в 2 раза? Очевидно, что работа эта требует написание однообразного кода. К счастью, относительно недавно появилась возможность задавать переменные прямо в CSS , и браузеры их без проблем обрабатывают. Об этом мы поговорим в этой статье.
Давайте разберём следующий код:
Некоторый текст...
Объявляются в псевдоэлементе root (хотя можно и прямо в самих элементах объявлять переменные). Использование же их очень простое: вместо конкретного значения свойства пишется var(имя_переменной) . Особенно интересно использование переменных вместе с функцией calc() . Благодаря этому можно увеличивать или уменьшать множество элементов на сайте, сохраняя при этом все пропорции.
По мере роста проекта его CSS файлы разрастаются и засоряются. Справиться с этим помогут CSS переменные, они дают возможность повторно использовать повторяющиеся CSS свойства.
Раньше переменные можно было использовать только в Less или Sass, но это препроцессоры и требуют компиляции перед использованием. Теперь переменные доступны в чистом CSS.
Объявление и использование переменных в CSS
На переменные в CSS распространяются те же ограничения и правила наследования, что и на обычные CSS правила. Самый простой способ использовать их — объявить их глобально в псевдо-классе :root , так все остальные селекторы смогут его наследовать.
:root{ --awesome-blue: #2196F3; }
Для доступа к значению переменной надо использовать конструкцию var(…) . Обратите внимание, что имена зависят о регистра, то есть —foo != —FOO .
Some-element{ background-color: var(--awesome-blue); }
Поддержка
На данный момент Firefox поддерживает переменные в CSS. В Google Chrome начиная с версии 49 это возможность включена, если вы используете версию 48 или более старую, то вы можете вручную включить поддержку, перейдя на страницу chrome://flags/ и включить Enable experimental Web Platform features .
Пример 1 — Цветовые схемы
Переменные в CSS полезны, когда вам надо применить одно и то же свойство для разных элементов, например, повторяющиеся цвета в теме. Вместо того, чтобы копировать один и тот же цвет везде где он нужен, мы можем использовать переменную.
Теперь, если заказчик захотел поменять цвет на странице, мы можем изменить весь стиль поменяв одну строку (строку объявления переменной). Без переменных нам пришлось бы менять все места, где используется этот цвет.
Пример 2 — Понятные названия для сложных свойств
Еще одна замечательная возможность, которую дают CSS переменные — спрятать сложное свойство за коротким понятным именем. Хороший пример — CSS свойства с несколькими параметрами, например: box-shadow , transform и font .
Объявив переменную с понятным именем мы сможем использовать её не тратя время на разбор сложного свойства.
Пример 3 — Динамические переменные
Когда переменная объявлена несколько раз, к ней применяются стандартные CSS правила наследования. Следующий пример демонстрирует как можно динамически управлять свойствами в зависимости от действий пользователя, при этом сохранить краткий и чистый код.
Наведите на зеленый и на синий блоки.
Заключение
Как видите переменные довольно просты в использовании и их определенно стоит попробовать. Рассмотрим еще пару вещей, на которые стоит обратить внимание:
- Функция var() имеет второй параметр, который будет использован в качестве значения, если переменная вызовет ошибку: width: var(--custom-width, 20%);
- При объявлении собственного правила так же можно использовать переменные: --base-color: #f93ce9; --background-gradient: linear-gradient(to top, var(--base-color), #444);
- Переменные можно использовать с еще одним нововведением в CSS — функцией calc(). Однако работает это пока только в Firefox: --container-width: 1000px; max-width: calc(var(--container-width) / 2);
На этом все! Попробуйте использовать CSS переменные, но пока избегайте их в серьезных проектах.
Всем привет, тема переменных в CSS давно ходит по интернету, однако не все знают о том, что это такое, да и сама технология не так давно вышла в релиз. И хоть использовать её во многих случаях рановато, уже пора понимать что она из себя представляет и как ею пользоваться. Давайте попробуем разобраться с технологией вместе. Обращу ваше внимание, что эта статья для тех, кто не знает о CSS переменных (кастомных свойствах) или только слышал о них. Если вы знакомы и умеете работать с данной фичей, то вам данная статья будет не интересна.
Итак, тема с переменными в стилях уже затерта до дыр, т.к. они давным давно существуют в препроцессорах. Это удобно, я уже плохо представляю себе написание стилей без возможности сохранить где-то определенное значение (цвет, величину, название шрифта, тип маркера у списка, всё что может придти в голову...). Однако препроцессоры не могут дать нам той гибкости, которую дают нативные переменные в CSS, и скоро вы поймете, почему.
Для начала нужно понять, как объявлять и использовать переменные. Переменные объявляются в селекторах:
:root {
--body-background: #ccc;
}
body {
background-color: var(--body-background);
}
Как видно из листинга выше, переменные объявляются двумя дефисами перед именем:
--variable-name
Чтобы использовать переменную, необходимо воспользоваться функцией var . Она имеет 2 параметра. Это, естественно, имя переменной, а вторым необязательным параметром идёт значение свойства, которое необходимо использовать в случае отсутствия переменной.
На этом набор новых возможностей с приходом переменных, разумеется, не заканчивается. Имея переменные в арсенале CSS, мы получаем большую гибкость в написании стилей. Например, теперь чтобы составить медиазапрос для экранов <320px в ширину, не нужно переопределять свойство целиком. Достаточно изменить значение переменной. Т.е.
Title {
--wrapper-width: 50%;
width: var(--wrapper-width);
}
@media (max-width: 320px) {
--wrapper-width: 100%;
}
Всё! Этого достаточно, чтобы свойство width
изменило свое значение!
Если CSS способен отслеживать изменения своих переменных, это значит, что с этим можно взаимодействовать различными способами.
Что насчёт JavaScript?
Управляя аттрибутом style, можно изменить стиль, прибегая к минимальным затратам усилий. Приведу грубый пример на React.Title {
--background: blue;
background-color: var(--background);
}
changeColor() {
this.setState({
style: {"--background": "green"}
});
}
Теперь по клику на элемент с классом title будет меняться цвет фона у элемента. Круто? Ещё бы! Не нужно добавлять новый класс, переопределять свойство или делать другие действия, способствующие изменению фонового цвета у элемента.
Ремарка
Если кто-то не знаком с React или кому-то просто непонятно, что произошло. Мы просто средствами JavaScript изменили аттрибут style у элемента, изменив значение переменной
--background
Используя переменные, изменять css извне стало проще, методов использования можно придумать массу, а мы пойдем дальше.
Области видимости
Нужно сказать пару слов об области видимости CSS переменных, здесь всё просто. Объявленная переменная доступна всем селекторам дочерних элементов данного селектора. Т.е. в листинге ниже использовать переменную --b в тэге html будет нельзя. А вот переменная --a в body и всех дочерних элементах будет работать без проблем (если её конечно не переопределят где-то ниже).Html {
--a: #ccc;
}
body {
--b: #a3a3a3;
}
(я знаю, что цвета в примерах скучные, но я плохо помню цвета по hex-коду:))
Переменные и calc
Как и любое числовое значение свойства, вы можете использовать переменную в функции calc .Title {
--title-width: 300px;
width: calc(var(--title-width) + 150px);
}
Круто! Особенно если учесть что переменную --title-width
, можно менять как внутри CSS, так и извне.
Заметьте, что величину мы обязаны положить в переменную. Дописать px , % , rem и т.д. к вызванной переменной у нас не получится. Однако ничто не мешает нам умножить с помощью функции calc значение на единицу в необходимой нам величине.
Title { --title-width: 300; /* так не сработает */ width: var(--title-width)px; /* так сработает */ width: calc(var(--title-width) * 1px); }