Руководство по переменным в CSS

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

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

Видео инсрукция от Александра Сокирки.

CSS переменные в препроцессорах.

Препроцессоры CSS используют переменные уже более 10 лет. Ниже я покажу вам простые примеры как препроцессоры работают с переменными.

В Sass (или SCSS) вы объявляете переменные следующим образом:

$theme-color: #000;

.element1 {
  border: 1px solid $theme-color;
}

.element2 {
  background-color: $theme-color;
}

Обратите внимание на знак доллара ($). Первая строка — это объявление переменной и ее значения. Два блока, которые следуют, — это примеры использования переменных.

Варианты в Less.js используют символ @

@linkcolor: #000;

a,.link {
  color: @linkcolor;
}

А варианты в Stylus выглядят так:

font-default = 14px

body
  font-size font-default

Вы можете самостоятельно ознакомиться с отдельными разделами документации для каждого из показанных выше препроцессоров, если хотите использовать эти сторонние технологии.

Переменные на нативном CSS

CSS-переменные, или Custom Properties, представляют собой новую возможность, которую вводит спецификация CSS. Чтобы создать переменную в CSS, нужно добавить два дефиса перед выбранным именем переменной или свойства, а затем использовать функцию var() для указания значения этой переменной:

:root {
  --main: #030303;
  --accent: #5a5a5a;
}

.container {
  color: var(--main);
}

.footer {
  border-color: var(--main);
}

.sidebar {
  color: var(--accent);
}

.module {
  border-color: var(--accent);
}

В данном примере мы определили две CSS-переменные: --main и --accent. Затем мы использовали каждую переменную на двух разных элементах, показывая гибкость, которую они предоставляют.

Как и в любом языке программирования, использование переменных позволяет определить переменную в одном месте. Если в дальнейшем вы захотите изменить это значение в вашем файле стилей, вам достаточно изменить первоначальное объявление, и это применится ко всем местам, где вы используете переменную.

Синтаксис переменных на CSS

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

В отличие от обычных свойств CSS, переменные чувствительны к регистру. Это означает, что --main-color не равно --Main-Color. Допустимыми символами для имен являются буквы, цифры, подчеркивания и дефисы.

Где определяются переменные CSS?

CSS кастомные свойства часто определяются непосредственно на корневом элементе документа HTML или shadow DOM. Для этого используется селектор псевдо-класса :root.

:root {
  --main: #030303;
  --accent: #5a5a5a;
}

Однако переменные CSS не ограничиваются определением только на корневом элементе, и часто бывает полезным определять их в других местах. :root выбирается в качестве селектора, потому что он всегда указывает на верхний элемент в дереве DOM (будь то полный документ или shadow DOM).

В большинстве случаев, можно получить тот же результат, определив кастомные свойства на элементе html (который является корневым элементом в документах HTML) или даже на элементе body. Использование :root позволяет писать код более устойчивым к будущим изменениям (например, если спецификация однажды добавит новый элемент в качестве корневого, то CSS останется неизменным) и, предположительно, позволяет таблице стилей применяться к другому типу документа, имеющему другой корневой элемент.

Например, следующий код ограничивает использование ваших кастомных свойств только для элемента .sidebar:

.sidebar {
  --main: #030303;
  --accent: #5a5a5a;
}

В качестве демонстрации, переменные обычно определяются на :root, но их можно использовать где угодно, где это практично. На самом деле, многие разработчики рекомендуют определять их ниже в дереве DOM для более мелких модулей во время начальной разработки, а затем двигаться к :root, создавая значения, которые имеют больший объем.

Технические заметки о переменных CSS.

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

Вот несколько вещей, на которые стоит обратить внимание:

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

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

:root {
  --main-color: red;
  --new-color: var(--main-color);
}

body {
  background: var(--new-color);
}

Здесь мы определили переменную --main-color, а затем использовали это же имя переменной в качестве значения следующей переменной CSS.

Также можно использовать ключевое слово !important в значении переменной CSS, но это относится только к «важности» самой переменной в отношении других определений переменных, а не к значению, используемому на одном или нескольких элементах в документе. Если это вызывает путаницу, рассмотрим следующий пример:

:root {
  --main-color: red !important;
  --main-color: orange;
}

body {
  background: var(--main-color);
}

В этом примере цвет фона будет «red«, несмотря на то, что значение «orange» появляется позже в определениях переменных. Но значение фона для элемента body не будет иметь никакой «важности«.

Переменные CSS также могут содержать значения ключевых слов, широко используемых в CSS, таких как initial, inherit и unset. Однако свойство all не влияет на переменные CSS (то есть они не сбрасываются).

Функция var()

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

Во-первых, функция var() действительна только в значении свойства; имя свойства или селектор не может использовать переменную CSS. Кроме того, значение медиа-запроса не может использовать переменную CSS (например, @media (max-width: var(--my-var)) недопустимо).

Функция var() принимает два аргумента:

• Имя пользовательского свойства для включения
• Значение запасного варианта, если пользовательское свойство недействительно

Вот пример, где действует второй аргумент:

:root {
  --main-colour: lightgreen;
}

body {
  background: var(--main-color, #ccc);
}

Обратите внимание, что в приведенном выше коде я написал имя переменной с использованием слова «colour» в британском или канадском написании, но при использовании переменной я использовал американское написание «color«. Это делает переменную технически недействительной, поэтому вместо нее применяется простой серый фон (#ccc).

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

:root {
  --main-font: Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--main-type, "Courier New", Consolas, monospace);
}

Еще раз обращаю ваше внимание на то, что моя переменная имеет ошибку: она объявляет неизвестную переменную --main-type вместо --main-font. Это вызывает запасное значение, которое является альтернативным набором шрифтов. Таким образом, все, что находится после первой запятой (включая любые другие запятые), является запасным значением.

Использование переменных CSS для частичных значений

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

Например, можно разбить стек шрифтов:

:root {
  --main-font: "Franklin Gothic";
  --fallback-font: Gill Sans;
  --generic-font: sans-serif;
}

body {
  font-family: var(--main-font), var(--fallback-font), var(--generic-font);
}

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

:root {
  --rgba-red: 25;
  --rgba-green: 50;
  --rgba-blue: 105;
  --rgba-opacity: 0.4;
}

body {
  background: rgba(var(--rgba-red), var(--rgba-green), var(--rgba-blue), var(--rgba-opacity));
}

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

Использование: CSS переменные + функция calc()

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

.element {
  width: calc(100% - 100px);
}

Пользовательские свойства CSS позволяют вам использовать calc() еще более эффективно, например, с предопределенными размерами. Вот пример:

:root {
  --size: 240;
}

.module {
  width: calc(var(--size) * 1px);
}

.module-small {
  --size: 360;
}

.module-medium {
  --size: 720;
}

.module-large {
  --size: 1080;
}

При использовании этих стилей я могу использовать наборы правил .module и .module-* внутри медиа-запросов, что позволяет мне показывать эти стили условно для конкретных размеров видовых экранов или других медиа-функций. Модули small/medium/large будут иметь те же классы, что и основной модуль, но только размер модуля будет перезаписываться по мере необходимости. В приведенном выше примере начальное значение размера 240 выступает в качестве своего рода значения по умолчанию, но я также могу передать 240px вторым аргументом в var(), чтобы он работал как резервное значение.

Заключение. CSS переменные.

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