Variables в CSS3

Основные варианты использования CSS-переменных (Custom Properties)

CSS Variables или CSS Custom Properties уже давно используются в разработке и поддерживаются большинством популярных браузеров. Если у вас нет обязательного требования разрабатывать под IE, то вполне вероятно, вы уже успели оценить их преимущества.

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

Варианты использования

1. Определение переменных

Начнём с базовых вещей, а именно: как определять переменные. Стоит помнить, что их можно определить как в корневом элементе :root (переменные будут доступны по всему приложению), так и внутри любого селектора (будут доступны только для выбранного элемента и его дочерних элементов):

2. Переопределение переменных

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

Второй пример показывает переопределение переменной в @media выражении. К сожалению, мы не можем вынести 1024px в переменную и использовать ее в @media — это является одним из ограничений CSS переменных.

:root < --color: green; >body < background-color: var(--color); >@media (max-width: 1024px) < :root < --color: red; >>

3. Локальный fallback

Представьте, что вы вызываете переменную —color-green , а ее не существует. Страшного не случится, но заданное CCS-свойство не отработает. Для подстраховки можно задать резервное значение вторым аргументом. Это значение также может быть CSS-переменной:

4. Привязка переменных

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

5. Переменные в calc()

В calc() можно перемножать числа со значениями в единицах измерения, н-р: px .

На выходе получим результирующее значение в той единице измерения, на которую умножили.

В примере показано, как перемножается 2 на 10px и в итоге получается 20px. Не важно, используем мы для этого обычные значения или CSS-переменные — результат будет одинаковый:

К примеру, у нас есть переменная —font: 20 . Но без указания единицы измерения мы не сможем ее корректно использовать в font-size .

Это можно решить с помощью calc() . Для преобразования числа в px , к примеру, достаточно умножить число на 1px в calc() :

6. Прозрачность в цветовых функциях

Задания цвета — самый распространенный кейс использования переменных.

Вот стандартный пример по использованию hex-цвета для определения значения переменной:

Часто бывает, что для цвета нужно задавать различную прозрачность. В CSS для этого есть:

Использование rgba()

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

1. Красного цвета
2. Зеленого цвета
3. Синего цвета
4. Альфа-канала для задания прозрачности

На самом деле, внутри CSS допускается использовать практически всё (за небольшим исключением), даже код на JavaScript!

Поэтому, задание в переменной значения цветов для Red, Green, Blue — вполне допустимо.

Вызовем функцию rgba() с переменной —color-blue—rgb . Для rgba() не хватает четвертого аргумента задающего прозрачность — добавим его через запятую:

На выходе собираются аргументы для rgba() : значения из переменной и альфа-канала.

Использование hsla()

Кроме rgba() можно использовать и hsla() . Это не так удобно, но как вариант, можно попробовать.

1. Определяем переменные с базовыми значениями для основных параметров hsla(): —hue , —saturation , —lightness , —opacity .
2. При использовании, указываем все базовые параметры в селекторе.
3. Меняем один / несколько переменных в селекторе (изменения коснутся только данного селектора и его дочерних элементов).

7. Переменные в SVG

С помощь переменных мы также можем изменять цвет внутри SVG: fill или stroke . Сложность заключается в том, что изображение SVG должно быть инлайново встроено на страницу, но при использовании сборщиков — это не проблема.

Итак, имеем SVG-элемент на странице, у которого в fill указана переменная —color :

И саму переменную —color в CSS:

Значение переменной можно переопределять при необходимых условиях: например, при событии hover на SVG:

Использование с JavaScript. API CSS Style Declaration

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

Рассмотрим, как можно работать с CSS переменными через JavaScript:

В CSS у нас есть 2 переменные:

// Получаем корневой элемент в DOM const root = document.querySelector(':root'); // Получаем "Вычисленные свойства" const rootStyles = getComputedStyle(root); // Получаем значение переменной по ее названию const color = rootStyles.getPropertyValue('--color'); // => 'green' // Изменяем значение переменной root.style.setProperty('--color', '#88d8b0'); // Удаляем CSS переменную root.style.removeProperty('--color');

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

Вычисленные свойства

В коде выше я затронул тему «Вычисленных свойств». Рассмотрим подробнее: для этого создадим небольшой пример:

Единицы измерения можно подразделить на абсолютные и относительные:

• Абсолютные — это пиксели ( px ), которые привязываются к разрешению экрана.
• Относительные (н-р: rem ) формируются относительно заданного параметра.

Для отображения, относительные единицы измерения должны быть преобразованы в абсолютные. Если мы откроем инспектор объектов в Google Chrome (или другом браузере) на вкладке «Elements», то сможем увидеть это преобразование:

• В секции Styles — значения в том виде, в котором мы их указали в CSS (относительные).
• В секции Computed — значения, приведенные к абсолютным единицам измерения. Функцией getComputedStyle в JavaScript мы как раз таки и получаем эти вычисленные значения.

Так для чего же может понадобиться работать с CSS-переменными через JavaScript? Самый распространенный кейс — это задание цветовой схемы: при переключении схемы мы обращаемся к CSS-переменной и просто изменяем ее значение. Все значения, где используется эта переменная, будут обновлены.

Небольшую демку по изменению цветовой схемы можно посмотреть здесь.

Проверка поддержки переменных

@supports ( (--a: 0) ) < /* Стили с поддержкой переменных */ >@supports ( not (--a: 0) ) < /* Стили без поддержки переменных */ >

if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) < // Сценарии с поддержкой переменных >else < // Сценарии без поддержки переменных >

Достоинства и ограничения

• Работают в runtime, в отличие от переменных препроцессоров
• Можно обратиться из JavaScript

• В именах обычных свойств CSS: var(—side): 10px
• В значениях media-запросов: @media screen and (min-width: var(—desktop))
• В подстановке URL: url(var(—image))

Заключение

Использование CSS-переменных еще один шаг к отказу от препроцессоров. Ждем реализации миксинов @apply на CSS и CSS Nesting Module!

Источник

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

Если вы разработчик, то вы точно хорошо знакомы с переменными, и возможно, они одни из ваших лучших друзей. По определению, переменная — это временное хранилище, которое содержит некое значение величины или информации.
Но каким образом это относится к тому CSS, который мы все знаем? Год назад на Хабре был пост о планируемых новшествах в CSS, которые были оглашены членом рабочей группы CSS и команды Google Chrome. Среди этих новшеств было введение поддержки переменных.
И вот, буквально на днях, поступили новости о выходе первого релиза рабочего черновика CSS Переменных (CSS Variables).

Почему CSS переменные?

Переменные в CSS — эта та штука, о которой народ спрашивал и хотел довольно долгое время.
Подумайте обо всех этих цветах (colors), высотах (heights), ширинах (widths) и размерах (sizes): как бы было прекрасно объявить их всего лишь один раз. И наконец, пришло время того, чего мы так долго ждали: писать меньше, но делать больше.

Установившиеся практики в CSS

Когда люди просят об объявлении переменных цвета в css (color), добавление комментариев в верней части CSS-файла было чем-то вроде симуляции поведения переменных:

/*-------------------------- link color: #99D1FF (light blue) box color: #555 (dark gray) --------------------------*/ 

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

Как это делается в LESS/Sass

Идея использовать переменные для таблицы стилей было одной из тех причин, по которым появились LESS и Sass.

LESS

Sass

Как это будет работать теперь

Прежде всего, не забывайте, что это ни один из браузеров пока не поддерживает. Но это то, как оно будет работать в будущем:
var-foo для определения, var(foo) для использования.
Следуя черновикам:

Любое имя свойства, начинающееся с префикса “var-” является свойством переменной. (Any property name starting with the prefix “var-” is a variable property)

Пример

Следующее правило декларирует имя свойства “var-header-color” для элемента root и присваивает для него значение “#99D1FF”:

Далее, его значение может передаваться с помощью переменной “header-color”:

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

Вывод

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

Источник

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

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

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

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

      div < --text-color: #ff4757; --text-size: 20px; height: 40px; font-family: Verdana; >#div1 < font-size: var(--text-size); >#div2 < color: var(--text-color); >#p1 
Первый блок.
 
Второй блок.
 
Третий блок.
   

Здесь в коде CSS для элемента div определены две переменныx: —text-color и —text-size

--text-color: #ff4757; --text-size: 20px;

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

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

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

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

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

Первый блок.
 
Второй блок.
 
Третий блок.
 

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

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

Резервные значения

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

      :root < --tex-color: #ff4757; --text-size: 20px; --reserved-color: #5352ed; >div < height: 35px; font-family: Verdana; >#div1 < color: var(--text-color, var(--reserved-color)); >#div2 < color: var(--text-color, var(--reserved-color, red)); >#div3 
Первый блок.
 
Второй блок.
 
Третий блок.
   

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

color: var(--text-color, var(--reserved-color));

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

color: var(--text-color, var(--reserved-color, red));

Источник