Руководство для начинающих по переменным CSS (также известным как пользовательские свойства CSS)

Оглавление:

• Переменные CSS в препроцессорах #
• Переменные (пользовательские свойства) в родном CSS #
• Почему «Пользовательские свойства»? #
• Где определяются переменные CSS? #
• Технические примечания о переменных CSS #
• Понимание функции var() #
• Использование переменных CSS с calc() #
• Трюки с переменными CSS #

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

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

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

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

Переменные в Less.js используют символ @ :

А в Stylus переменные выглядят так:

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

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

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

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

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

Почему «Пользовательские свойства»?

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

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

Спецификация объясняет, что одни только два тире недействительны (очевидно, зарезервированы для будущего использования), и CSS никогда не будет придавать значение любому допустимому dashed-identifier за исключением его использования в качестве пользовательского свойства, определенного автором.

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

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

Как вы можете видеть в приведенном выше примере, вы часто будете видеть пользовательские свойства CSS, определенные непосредственно в корневом элементе HTML-документа или теневой модели DOM. Это достигается с помощью селектора псевдокласса :root .

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

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

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

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

Технические примечания о переменных CSS

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

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

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

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

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

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

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

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

Понимание функции var()

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете видеть, насколько это может быть полезно, позволяя вам динамически «создавать» значения.

Использование переменных CSS с calc()

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

Пользовательские свойства CSS позволяют вывести calc() на новый уровень, например, с предопределенными размерами. Ахмад Шадид описал нечто подобное, и вот пример:

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

Трюки с переменными CSS

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

• Как я упоминал ранее, вы можете использовать переменные CSS во встроенных стилях, как и в случае полей соотношения сторон.
• Символ пробела является допустимым значением для переменной CSS, что позволяет вам включать и выключать трюк (например, для чего-то вроде темного режима), о котором вы можете прочитать в сообщении Леи.
• Вы не можете написать стили наведения во встроенных стилях, но вы можете обойти это, используя переменные CSS.
• Переменные CSS упрощают создание разноцветных SVG, как описано здесь.
• Вы можете создавать практичные и удобные в сопровождении дизайн-системы и темы с помощью переменных CSS, подробно изложенных в этом посте.
• Вы можете использовать переменные CSS для создания более эффективных и удобных в сопровождении сеток с помощью функций Grid Layout, как описано Мишель Баркер.

Вывод

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

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

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

• Макет сетки CSS
• Введение в Parcel.js
• Учебник CSS по флексбоксу
• Вебпак для начинающих
• Учебное пособие по микровзаимодействиям для начинающих разработчиков

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

Макет и презентация Криса Фицджеральда и Кэрол К.