var() в CSS


Содержание

СSS3 Переменные

CSS3 пользовательские свойства (Переменные)

Функция var() может использоваться для вставки значения пользовательского свойства.

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Функция
var() 49.0 15.0 31.0 9.1 36.0

Функция var()

Переменные CSS3 должны быть объявлены в селекторе CSS, который определяет его область. Для глобальной области можно использовать либо :root , либо селектор .

Имя переменной должно начинаться с двух тире — , чувствительна к регистру!

Синтаксис функции var() следующим образом:

Значение Описание
custom-name Требует. Имя настраиваемого свойства (должно начинаться с двух тиры)
value Факультативный. Резервное значение (используется, если пользовательское свойство недопустимо)

В следующем примере сначала определяется глобальное настраиваемое свойство с именем «—main-bg-color» , затем используется функция var() , для вставки значения пользовательского свойства, в таблицу стилей:

Пример

#div1 <
background-color: var(—main-bg-color);
>

#div2 <
background-color: var(—main-bg-color);
>

В следующем примере используется функция var() для вставки нескольких пользовательских значение свойства:

Пример

:root <
—main-bg-color: coral;
—main-txt-color: blue;
—main-padding: 15px;
>

#div1 <
background-color: var(—main-bg-color);
color: var(—main-txt-color);
padding: var(—main-padding);
>

#div2 <
background-color: var(—main-bg-color);
color: var(—main-txt-color);
padding: var(—main-padding);
>

CSS Variables

CSS Custom Properties (Variables)

The var() function can be used to insert the value of a custom property.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Function
var() 49.0 15.0 31.0 9.1 36.0

The var() Function

Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.

The variable name must begin with two dashes (—) and is case sensitive!

The syntax of the var() function is as follows:

Value Description
custom-name Required. The custom property’s name (must start with two dashes)
value Optional. The fallback value (used if the custom property is invalid)

The following example first defines a global custom property named «—main-bg-color», then it uses the var() function to insert the value of the custom property later in the style sheet:

Example

#div1 <
background-color: var(—main-bg-color);
>

#div2 <
background-color: var(—main-bg-color);
>

The following example uses the var() function to insert several custom property values:

Example


:root <
—main-bg-color: coral;
—main-txt-color: blue;
—main-padding: 15px;
>

#div1 <
background-color: var(—main-bg-color);
color: var(—main-txt-color);
padding: var(—main-padding);
>

#div2 <
background-color: var(—main-bg-color);
color: var(—main-txt-color);
padding: var(—main-padding);
>

Frontender Magazine

CSS-переменные, или, точнее, кастомные CSS-свойства, доступны в Chrome начиная с 49 версии. Они могут быть полезны для уменьшения количества повторяющегося кода в CSS, создания впечатляющих эффектов вроде смены тем на лету и, потенциально, создания полифилов для будущих возможностей CSS.

Хаос в CSS

Обычная практика при разработке приложения — составить набор фирменных цветов, которые будут использоваться, чтобы поддержать единый стиль. Увы, многократное использование этих цветов в CSS не только является рутинной работой, но ещё и создаёт пространство для возникновения ошибок. Если в какой-то момент один из цветов нужно будет поменять, разработчик может неосторожно воспользоваться поиском и заменой по всему документу, что в большом проекте может быть довольно опасно.

В последнее время многие разработчики стали использовать CSS-препроцессоры типа SASS или LESS, которые решают эту проблему с помощью переменных. Хотя эти инструменты заметно увеличили продуктивность разработки, препроцессорные переменные имеют очень серьёзный недостаток: они статичны и не могут меняться на лету. Появление возможности динамически менять переменные не только позволит на лету менять темы сайта или приложения, но также означает значительное расширение возможностей отзывчивого дизайна и возможность создания полифилов для будущих свойств CSS. С выходом Chrome 49 переменные стали доступны в виде кастомных CSS-свойств.

Кастомные свойства в двух словах

Кастомные свойства расширяют наш CSS-инструментарий двумя новыми возможностями:

  • Автор кода может присваивать произвольные значения свойствам с придуманными им самим именами.
  • Функция var() позволяет затем использовать эти значения в других свойствах.

Краткий пример для демонстрации:

—main-color — это определённое автором кастомное свойство со значением #06c . Заметьте, что все кастомные свойства начинаются с двух дефисов.

Функция var() возвращает значение кастомного свойства и заменяется им, в результате чего получается color: #06c; . Если кастомное свойство где-то определено в таблице стилей, оно будет доступно функции var .

На первый взгляд синтаксис может показаться странным. Многие разработчики недоумевают: «Почему бы просто не использовать $foo в качестве имён переменных?» Это было сделано специально для повышения гибкости и возможности в перспективе создавать макросы для $foo . Более подробно об этом можно прочесть в статье одного из авторов спецификации, Таба Аткинса (Tab Atkins).

Синтаксис кастомных свойств

Синтаксис кастомных свойств довольно прост:

Обратите внимание, что кастомные свойства регистрозависимы, то есть —header-color и —Header-Color — это два разных свойства. Хотя синтаксис поначалу может показаться незамысловатым, на самом деле он позволяет сделать довольно много. К примеру, ниже — пример валидного кастомного свойства:

Хотя это выражение не будет работать в качестве переменной (а также не будет валидным значением любого обычного свойства), потенциально оно может быть прочитано и обработано на лету с помощью JavaScript. Это означает, что кастомные свойства могут открыть доступ ко всевозможным интересным техникам, недоступным с нынешними CSS-препроцессорами. Так что если вы, позёвывая, думаете что-то вроде «Какая разница, у меня есть SASS…», подумайте ещё раз! Это не те переменные, с которыми вы привыкли работать.

Каскад

Кастомные свойства следуют стандартным правилам каскада, так что вы можете определить одно и то же свойство на разных уровнях специфичности:

Это означает, что можно использовать кастомные свойства в медиавыражениях для управления отзывчивым дизайном. Примером использования может служить увеличение внешних отступов от основных структурных элементов при увеличении размеров экрана:

Необходимо отметить, что вышеприведённый приём невозможно повторить используя CSS-препроцессоры, потому что они неспособны переопределять переменные внутри медиавыражений. У этой возможности огромный потенциал!

Также есть возможность использовать кастомные свойства, получающие своё значение из других кастомных свойств. Это может быть крайне полезно для настройки тем:

Функция var()

Чтобы получить и использовать значение кастомного свойства, понадобится функция var() . Вот её синтаксис:

Здесь — имя определённого автором кастомного свойства, — фолбек, который будет использован, если упомянутое кастомное свойство не является валидным. Фолбек может быть списком, разделённым запятыми, он будет преобразован к единому значению. Например, var(—font-stack, «Roboto», «Helvetica»); определяет фолбек «Roboto», «Helvetica» . Обратите внимание, что краткая запись некоторых свойств (как в случае внешних и внутренних отступов) разделяется не запятыми, а пробелами, так что валидный фолбек для внутренних отступов будет выглядеть примерно так:

С такими фолбеками автор компоненты может написать для своего элемента пуленепробиваемые стили:

Этот метод особенно пригодится для стилизации веб-компонент, использующих Shadow DOM, поскольку кастомные свойства могут пересекать теневые границы. Автор веб-компоненты может создать начальный дизайн при помощи фолбеков, а потом настроить стили при помощи кастомных свойств:

Илон Маск рекомендует:  Что такое код bcdiv

При использовании var() нужно иметь в виду несколько нюансов. Например, переменные не могут быть именами свойств:

Это не является эквивалентом присваивания margin-top: 20px; . Более того, второе объявление не является валидным, и выбросит ошибку.

Аналогично, невозможно создать значение, часть которого берётся из переменной:

Это тоже не является эквивалентом margin-top: 20px; . Чтобы собрать значение, понадобится кое-что другое: функция calc() .

Создание значений с помощью calc()

На случай, если вы никогда раньше с ней не работали, функция calc() — это небольшой, удобный инструмент, позволяющий выполнять вычисления, чтобы определять значения в CSS. Она поддерживается всеми современными браузерами, и её можно использовать вместе с кастомными свойствами для создания новых значений. Например:


Работа с кастомными свойствами в JavaScript

Чтобы получить значение кастомного свойства, используйте метод getPropertyValue() объекта CSSStyleDeclaration.

Аналогично, чтобы динамически менять значение кастомного свойства, используйте метод setProperty() объекта CSSStyleDeclaration .

Также при задании значения кастомного свойства на лету можно использовать ссылку на другое кастомное свойство, вставив функцию var() в вызов setProperty() .

Поскольку кастомные свойства могут ссылаться на другие кастомные свойства, можете представить какие интересные динамические эффекты можно будет делать подобным образом.

Поддержка браузерами

На данный момент кастомные свойства поддерживаются в Chrome 49, Firefox 42, Safari 9.1, и iOS Safari 9.3.

Взгляните на пример, чтобы получить представление о разных интересных техниках, которые станут доступным благодаря кастомным свойствам.

Материалы для дальнейшего изучения

Если вы хотите узнать больше про кастомные свойства, Филип Уолтон (Philip Walton) из команды Google Analytics написал учебник для начинающих про то, почему он в восторге от кастомных свойств, а также за их появлением в других браузерах можно следить на chromestatus.com.

Если не указано обратного, всё содержимое этой страницы находится под лицензией Creative Commons Attribution 3.0 License, а фрагменты кода находятся под лицензией Apache 2.0 License. Подробнее см. Terms of Service.

© 2013 Frontender Magazine

Кроме материалов, опубликованных под лицензией Creative Commons

Переменные в CSS

Переменные в CSS

Здравствуйте! Я уже писал о препроцессорах Less и Sass. Так вот у них есть возможность использовать переменные в которых можно сохранять значения CSS свойств. Но теперь эта возможность появилась и в чистом CSS без всяких там препроцессоров. Вот о ней я и хочу рассказать в этой статье.

Хочу заметить, что хотя часто и используется термин «переменные» (css variables), но официально они называются custom properties (кастомные свойства).

Определение переменных CSS надо начинать с префикса —, например, —my-var. Их можно определять для любого элемента. Например:

Здесь в примере CSS для элемента div определены 2 переменныx: —text-col и —text-siz.

С помощью специального выражения var() вы можете ссылаться на эти переменные в любой части кода:

В итоге 1-ый блок получит высоту шрифта из —text-siz, 2-ой блок получит цвет шрифта из —text-col, а третий блок получит оба этих компонента.

Ну а если вам потребуется изменить цвет текста, то достаточно будет изменить значение переменной.

Подобные переменные вы можете определить для любого элемента. При этом они будут наследоваться дочерними элементами. Так, в примере, вложенный элемент параграфа получает стили от родительского div.

А, что если бы параграф находился бы вне блока div:

Тогда бы значения из переменных к нему бы не применились:

В случае, если же необходимо, чтобы переменные могли бы использоваться глобально для всех элементов, тогда их надо определить для элемента :root.

Резервные значения переменных

При определения переменных они могут содержать какие-нибудь ошибки, например, переменная вообще не определена. В этом случае вы можете указать при применении переменной резервные значения, которые бдут применяться в случае, если значение переменной отсутствует или некорректно.

2-ой параметр в функции var() позволяет задать резервное значение. Это может быть как точное значение, так и значение другой переменной:

Для второй переменной можно также определить резервное значение, если она будет некорректна:

В завершении хочу сказать, что переменные в CSS поддерживаются уже большинством браузеров. Подробнее можно посмотреть на сайте caniuse.com.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Начинаем работать с переменными CSS — часть 1

Краткое руководство для понимания что такое переменные в CSS и как они делают CSS более мощным и реактивным.

CSS-переменные, которые также называют пользовательскими свойствами (CSS Custom Properties) становятся довольно популярными на данный момент, благодаря своим широким возможностям и реактивному характеру. После прочтения этой заметки у вас появится понимание того, как их можно использовать в повседневной работе.

Эта заметка предназначена для front-end разработчиков среднего уровня (или дизайнеров, способных писать код). Предполагается, что у вы знакомы с CSS, HTML и немного с JavaScript.


Что такое переменные (или CSS переменные)?

В целом, переменная – это контейнер, в котором хранится некоторое значение, к переменной можно обращаться в блоке кода и получать ее значение. В CSS, как в языках программирования, переменные ведут себя аналогично.

Общий синтаксис для переменных CSS показан ниже:

Объявление переменной начинается с символов — — префикса, за которым следует имя переменной. Переменная будет доступна в .CSS-файле или .HTML-файле (при использовании инлайн-стилей) совместно с функцией var . Например, переменная с именем “color” и значением “blue” может быть объявлена как —color: blue и может быть доступна как var(—color) .

Не путайте с синтаксисом JavaScript. В JavaScript var используется для объявления переменных, а в CSS var используется для доступа к значению переменной.

Давайте рассмотрим пример, представленный ниже:

Мы объявили 2 переменные с именами —color-dark и —color-bright . Далее мы обращаемся к ним и получаем значение обеих переменных в классах bright и dark . CSS-переменные можно использовать следующим образом: вместо того, чтобы указывать одни и те же значения CSS-свойств многократно, мы просто ссылаемся на переменные.

Какие проблемы возникают с переменные CSS или пользовательскими свойствами?

Давайте рассмотрим преимущества использования CSS-переменных.

  • Масштабируемый и читаемый код
    При использовании традиционного CSS, мы довольно часто повторяем значения свойств. Это делает наш код не только «топорным», но и трудночитаемым, а также его становится сложно поддерживать при увеличении его объема.
  • Реактивные элементы
    Однажды нам может понадобиться изменить значение переменной, в тот же момент соответствующие HTML-элементы обновятся и поменяют свой внешний вид в соответствии с новыми значениями переменной, что мы увидим в браузере.
  • Ускорение рабочего процесса
    CSS переменные позволяют немного ускорить процесс разработки. Если значение свойства требуется поменять, нам будет нужно всего лишь изменить значение переменной. На это уйдет меньше времени, чем на поиск в коде каждого упоминания свойства и его замену.
  • Продвинутые математические расчеты
    Вы можете выполнять базовые вычисления с использованием основных математических операторов в CSS, используя функцию calc() . Функции calc() может быть передан только 1 параметр с двумя операндами и одним оператором, результат выполнения становится значением свойства CSS. Поддерживаются основные математические операции: сложение(+) , вычитание(-), умножение(*) и деление (/).

Общий синтаксис функции calc() : calc(Операнд1 [Оператор] Операнд2);

Хорошо, что операндом функции calc() может быть CSS переменная. Это делает функцию calc() еще более динамичной и полезной.

Переменные CSS могут использоваться только в современных браузерах и если вы ведете разработку с учетом устаревших браузеров, вам следует отказаться от использования CSS-переменных.

Но почему нет? В наши дни люди отправляют экспедицию на Марс, так что по крайней мере вы должны быть тем либералом работы с кодом.

Надеюсь, что теперь у вас есть общее понимание того, как работают CSS-переменные (пользовательские свойства) и это сделает ваш рабочий процесс масштабируемым и более продуктивным.

Css vars and color-theme for site:

Цветовые темы:

А работает это довольно просто.

Создаём базовый цвет который будет меняться. Привязываем его к data-theme на html.

Теперь нам нужны сами цвета. А точнее их яркость и насыщенность. Для этого будем использовать схему hsl. Помещаем все переменные в :root.

Илон Маск рекомендует:  Направление текста

Ну вот. Дело за малым. Хватаем нужный элемент и применяем к нему нашу переменную.

Теперь будем менять контрастность. Заменяем :root на html[с атрибутом].

Теперь для каждой темы берём свои s,l значения.

CSS переменные — практические советы по работе

Содержание

Вступление

В последнее время я довольно много игрался с css переменными и подумал, что мог бы поделиться несколькими советами по созданию стратегии по их интеграции в мой рабочий процесс.

Типы CSS-аргументов

При работе с CSS аргументами часто может быть полезным думать о них, как о двух разных типах:

Первичные пользовательские свойства

Это свойство, которое вы можете изменять в разных селекторах, в медиа-запросах или с помощью псевдо-селекторов :hover или :focus или, например, с помощью JavaScript. Обычно она содержит одно значение:

Вторичные пользовательские свойства

Это аргументы, которые вычисляются из других. Например, в коде ниже размер ячейки сетки(grid) —rowHeight — вычисляется из нескольких первичных. Результат вычисления применяется к свойству, но никогда не обновляется вручную — только пересчитывается в результате изменения первичных CSS переменных.

Может быть полезно добавлять префикс вторичным аргументам, как в этом примере, чтобы вы и другие люди, работающие с вашим кодом, знали, что их нельзя менять вручную:

Единственным исключением могла бы быть ситуация, когда вам нужно изменить способ вычисления значения, но теоретически после его установки он должен быть постоянным. Это может отбить охоту у разработчиков, не знакомых с вашим кодом вносить изменения без необходимости.


Область видимости

Во моих примерах я объявляю CSS переменные в :root , который представляет собой элемент :

Однако, в этом нет строгой необходимости, и более того, это не очень хорошая практика.

Большинство причин, по которым не рекомендуется задавать CSS переменные в глобальной области видимости в Javascript также применимы к CSS. Если бы вы при этом захотели использовать пользовательское свойство для фона-цвета -bgColor в разных компонентах, то столкнулись бы со всеми проблемами, связанными с областью видимости. Лучше всего объявлять их в селекторе, например, если вы работаете в компонентах:

В вышеприведенном фрагменте кода -bgColor привязан к каждому компоненту, поэтому вы можете использовать переменную с тем же именем, не опасаясь, что это повлияет на что-либо вне этого компонента.

Установка величин по умолчанию

С помощью CSS переменных вы можете установить величину(или несколько величин) по умолчанию. Это означает, что в некоторых ситуациях вам нужно только объявить свои переменные в той точке, в которой они должны измениться. В коде ниже CSS переменная -bgColor для поля объявляется только при достижении ширины в 40em — до этого она принимает значение по умолчанию(red):

В этом втором примере вы можете видеть, что селекторы h1 и p имеют разные величины по умолчанию для своего свойства цвета, но оба принимают переменную при наведении:

Использование пользовательских свойств с препроцессорными

Один из недостатков CSS-аргументов — они не работают в медиа-запросах или псевдоклассах, например :nth-child(var(-n)) не будет работать. Поэтому, скорее всего, вы все равно захотите использовать препроцессорные аргументы.

Я бы предостерег от смешивания этих двух типов пользовательских свойств, если вы не полностью понимаете их отличия. Аргументы Sass скомпилируются до того, как ваш код попадает в браузер, тогда как в CSS они не получат вычисленное значение, пока не попадут в браузер. Это означает, что в приведенном ниже коде величина ширины для .box1 будет работать, но .box2 выдает ошибку, потому что величина для -halfWidth передается браузеру в виде строки:

Однако вы можете использовать calc() , как в предыдущих примерах. Смотрите результат в ниже:

Если вы проинспектируете элемент в консоли Chrome и перейдете на вкладку «Вычисляемые стили»(Computed Styles), вы увидите, что значение ширины для .box2 не вычисляется. В нашей компании мы используем много функций Sass, например, для вычисления rem из пикселей при определении размера. Я обнаружил, что это оказалось проблемой, когда я попытался передать функцию Sass в аргумент CSS, например, —width: rem (600px) . Есть плагин PostCSS, который может преобразовывать пиксели в rem чтобы достичь желаемого результата, но мне нужно будет немного поэкспериментировать с ними, прежде чем я буду уверенно рекомендовать их использовать с CSS переменными.

Тем не менее, существуют сценарии, в которых использование препроцессорных и CSS переменных в одном блоке кода вместе имеет смысл, например, в медиа-запросах, как упоминалось ранее.

В этой примере я использую переменные Sass для резервных значений в CSS переменной, а также в медиа-запросе для удобства:

Псевдокласс :root и работа с ним

Сегодня случайно наткнулся на примеры работы с псевдоклассом :root . Сфера применения достаточно широкая. Хотелось бы услышать мнение тех, кто пользовался или пользуется. Реальный опыт эксплуатации, а не статейный материал. Подойдет ли для персонализации проекта, выбора основного цвета, фона и т.д.? Как дела с валидацией, скоростью и прочим? Можно ли сократить количество стилей с его помощью?

Это просто пример:

Больше примеров можно найти тут.

6 ответов 6

:root не делает ничего интересного. Его фишка в том, что он может ссылаться на любой корневой элемент. В HTML-файле это будет html , в SVG-файле svg , в XML-файле любой его корневой элемент.

Но ведь мы обычно пишем стили для HTML (ну или для SVG) и мы точно знаем, какой тег у нас корневой. Вот честно, мне сложно представить, чтобы мы один и тот же CSS-файл подключали одновременно к HTML и к SVG, да ещё и хотели одинаковые стили применить к их корневым элементам (но если всё-таки да, то этот псевдокласс для вас!).

Так что считаю, что его вполне можно заменить селектором по тегу.

Ну а если стилизуются разные XML’ки, то он вполне может быть полезен.
Хотя лично я на практике не встречал необходимости стилизовать XML.

Данный метод очень хорош. С помощью него можно удобно изменять стили массово. К примеру, если у вас указан один и тот же цвет в нескольких стилях, то для того, что бы его поменять не нужно все перерывать.

По скорости ничего не могу сказать. CSS-переменные работают так же быстро, как и остальные функции. По крайней мере по временной шкале браузера. Но всё же есть отзывы, что затормаживает на несколько миллисекунд.

Но самая большая проблема в том, что CSS-переменные начали использоваться совсем недавно. Их не поддерживают большинство «отсталых» и почти все старые версии любых браузеров. Их не поддерживает IE, Edge, Yandex (хоть и создан на Chromium) и несколько других.

Вывод мой такой:
CSS-переменные нужно использовать, пока что, только в мелких разработках, для тестирования, что бы было удобно потом редактировать, а в крупных проектах лучше удержаться от них. Надеюсь, в будущем его будут поддерживать все браузера. Но я в любом случае не советовал бы их использовать и в будущем, так как у большинства до сих пор стоят старые версии браузеров и кто его знает, как они будет отображаться (Вспомним vw и vh, которые в разных браузерах означают разные размера).

Переменные в CSS

Переменные в CSS или на английском CSS Custom Properties, что в переводе звучит, как пользовательские свойства CSS, — это специальные css-свойства, которые позволяют изменять значения любых других css-свойств динамически. CSS переременные подобны переменным в JavaScript. Сейчас css-переменные поддерживаются всеми современными браузерами. Можно сказать, что их появление было продиктовано еще препроцессорами, и то, что они были добавлены в спецификацию CSS — большой шаг вперед.

Переменные в CSS, или пользовательские свойства, имеют огромный потенциал для изменения кода и структуры CSS. Давайте рассмотрим стратегии получения максимальной пользы от переменных CSS.

Схожесть css-переменных с переменными в препроцессорах

Пользовательские свойства немного похожи на переменные в препроцессорах, но имеют некоторые важные отличия. Первое и самое очевидное отличие — это синтаксис.

Илон Маск рекомендует:  Как открыть интернет-магазин

В синтаксисе SASS (SCSS) мы используем символ доллара для обозначения переменной:

Для Less нужно использовать символ @ :

Однако, препроцессорные переменные имеют некоторые ограничения:


Поэтому стоит изучить, что такое переменные CSS, и затем использовать их в коде.

CSS-переменные имеют синтаксис, похожий на переменные в SASS или Less, и используют префикс в виде 2-х дефисов:

Значение свойства может быть любым допустимым значением CSS: цветом, строкой, значением макета, даже выражением.

Чтобы добавить использование переменной в код, необходимо записать так:

Еще несколько вариантов назначения css-переменных. Первый из них подразумевает использование глобальной видимости переменных, которые назначаются для :root :

Что касается элемента :root , то в HTML это то же самое, что и корневой тег html , но с более высокой специфичностью.

Для использования CSS-переменных необходимо указать в соответствующем свойстве функцию var() с нужной переменной в скобках:

Вы можете объявлять переменные внутри любого элемента. Тогда они будут привязаны к этому элементу и его дочерним элементам. Использовать переменные можно следующим образом:

В примере ниже мы используем переменную из класса .box в классе .my-test , в который вложен .box . И не увидим, что эта переменная не применилась, т.к. для родительского .my-test она не видна.

Результат работы переменной не виден:

На скриншоте видно, что в свойстве переменная выделена серым цветом. Это значит, что она не была найдена и использована браузером.

Для вложенного элемента цвет переменной в инспекторе свойств другой — и мы видим на странице, что к нему добавилась точечная рамка.

Особенности объявления css-переменных и их использования

Функция var() — это удобный способ предоставить значение по умолчанию. Вы можете сделать это, если не уверены, определено ли настраиваемое свойство и хотите ли вы указать значение, которое будет использоваться в качестве резерва. Это можно сделать легко, передав второй параметр функции:

Кроме того, вы можете повторно использовать другие переменные для объявления новых:

Арифметические операции: +, -, * и функция calc()

Поскольку мы привыкли к препроцессорам и другим языкам, мы хотим иметь возможность использовать базовые операторы при работе с переменными. Для этого CSS предоставляет функцию calc() , которая заставляет браузер пересчитать выражение после внесения каких-либо изменений в значение настраиваемого свойства:

Вы можете столкнуться с проблемами, если попытаетесь использовать значение без единицы. В этой ситуации вам не обойтись без функции calc() — она ваш друг, потому что без нее код не будет работать:

Рассмотрим пример, в котором мы можем изменить размер шрифта кнопок, исходя из одной переменной и используя функцию calc() для расчета других величин на основе нашей единственной переменной:

Попробуйте самостоятельно изменить шрифт, изменяя значения в CSS.

Области видимости и наследование

Прежде чем говорить о областях пользовательских свойств CSS, давайте вспомним области JavaScript и препроцессоры, чтобы лучше понять различия.

Мы знаем, что, например, с переменными JavaScript, которые определяются ключевым словом var , область действия ограничена функциями.

Мы имеем аналогичную ситуацию с let и const , но они являются локальными переменными масштаба блока.

Замыкание в JavaScript — это функция, которая имеет доступ к внешним (охватывающим) функциям — цепочке областей. Замыкание имеет три цепочки областей и имеет доступ к следующему:

  • его собственная область видимости (т. е. переменные, определенные между его фигурными скобками)
  • переменные внешней функции,
  • глобальные переменные.

История с препроцессорами схожа. Давайте используем SASS в качестве примера, потому что это, вероятно, самый популярный препроцессор сегодня. С SASS мы имеем два типа переменных: локальные и глобальные.

Глобальная переменная может быть объявлена ​​вне любого селектора или конструкции (например, как mixin). В противном случае переменная будет локальной.

Любые вложенные блоки кода могут обращаться к окружающим переменным (как в JavaScript).

Это означает, что в SASS области действия переменной полностью зависят от структуры кода.

Однако пользовательские свойства CSS наследуются по умолчанию, и, как и другие свойства CSS, они каскадные.

Вы также не можете иметь глобальную переменную, которая объявляет пользовательское свойство вне селектора — это не допустимый CSS. Глобальная область действия для пользовательских свойств CSS на самом деле является корневой областью действия, после чего свойство доступно глобально.

Динамическое изменение css-переменных

Давайте использовать наши знания синтаксиса и адаптировать пример SASS к HTML и CSS. Мы создадим демонстрационную версию, используя собственные пользовательские свойства CSS. Во-первых, HTML:

Использование CSS переменных в разработке сайтов


Читая на днях невероятно полезный сайт caniuse.com, я был приятно удивлен, что CSS переменные уже поддерживаются всеми основными браузерами, кроме одного. А это значит, что мне стоит рассмотреть их использование в современной разработке, поскольку в недалеком будущем это станет обычной практикой.

Не впервой

Стоит упомянуть, что переменные уже не в первый раз появляются в CSS: первая переменная currentColor существует уже много лет. Препроцессоры, такие как Sass, тоже уже долгое время поддерживают переменные. Новая CSS спецификация была вдохновлена многими открытиями, сделанными на протяжении долгого времени разработки.

Так же стоит упомянуть, что переменные Sass и CSS – это разные звери: они по-разному пишутся и, не смотря на то, что у них есть некоторые сходства, CSS переменные могут то, чего не могут переменные Sass, и наоборот.

Самый простой способ использовать переменные – задавать цвета, которые постоянно используются в таблице стилей, и именно с этого примера я и начну.

Цвета

Переменные могут быть заданы где угодно, но они наследуются согласно стандартным правилам CSS. По этому, есть несколько логических мест:

  • Универстальный селектор (*)
  • body
  • :root
  • Классы
  • Селекторы

На практике, переменные могут быть заданы на любом селекторе, но он ограничит их наследование, это важно.

Перед переменной ставятся два тире, сама переменная может быть любым словом без пробелов:

В отличие от других CSS свойств, переменные чувствительны к регистру: —alert и —Alert – это разные переменные.

Позже переменная используется в таблице стилей с функцией var(), чтобы воссоздать заданное значение:

Элементу h3 будет задан цвет, соответствующий переменной —alert.

Единицы изменения

Переменные могут использоваться в значениях свойств, состоящих из нескольких компонентов:

Но они не могут быть связаны с единицами измерения. Другими словами, вот так делать нельзя:

А вот так можно:

Переменные можно использовать с функцией calc:

У элемента с классом .subtle border-radius будет 4px.

Места использования

Переменные можно задавать и использовать не только в таблице стилей. Встроенные или inline переменные тоже валидны. Например, в подключенном CSS:

Или в HTML, inline ссылка на переменную:

Ключевые значения

В Sass переменные часто используются для задания ключевых значений, на которые потом ссылаются по всему CSS. То же самое можно делать, используя родные переменные CSS.

Эти переменные могут быть использованы где угодно в CSS:

Если все переменные собраны в одном месте, то изменив их, можно легко поменять стиль всего сайта; если изменится значение переменной, то изменится и CSS во всех местах, где она использовалась. Больше не нужно искать значения по всей таблице стилей!

К тому же, CSS переменные можно использовать внутри @media queries, это значительное преимущество по сравнению с Sass переменными.

Переменные сегодня

На данный момент, Microsoft Edge / IE – единственный браузер, который не поддерживает CSS переменные, но в Edge стоит пометка «в разработке». Это значит, что скоро разработчики смогут использовать переменные в своем коде. А пока что есть два варианта:

1. Использовать пост-препроцессоры с поддержкой CSS переменных.

Напишите CSS, перекомпилируйте его с помощью PostCSS и добавьте cssnext, на выходе вы получите нужный CSS код.

Результат на CSS:

В этом случаи нужно, чтобы все изменения в коде обрабатывались через cssnext. Альтернатива:

2. Используйте @supports

Можно использовать @supports, чтоб определить, поддерживает ли браузер CSS переменные:

Это значит, что вам нужно будет писать альтернативный вариант для браузеров, которые не понимают CSS переменные:

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL