0Pricing
CSS Academy · Урок

Объявление и использование пользовательских свойств

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

«Объявление и использование пользовательских свойств» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое пользовательские свойства CSS

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

Объявление пользовательских свойств

Объявляйте пользовательские свойства на любом элементе. Объявление на :root делает их доступными глобально:

<div class="demo">Custom properties declared on :root</div>

Использование функции var()

Обращайтесь к пользовательскому свойству с помощью функции var():

<button>Styled Button</button>

Пользовательские свойства наследуются

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

<div class="card">
  <div class="card__body">Inherits --card-bg from .card</div>
</div>

Недопустимые значения пользовательских свойств

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

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

Основные различия:

  • Пользовательские свойства CSS являются динамическими в браузере — они обновляются во время работы
  • Переменные Sass исчезают на этапе сборки
  • Пользовательские свойства можно изменять с помощью JavaScript
  • Пользовательские свойства подчиняются каскаду и наследованию

Соглашения об именовании

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

<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>

Глобальная и компонентная область видимости

Определяйте глобальные значения в :root, а значения для конкретного компонента — в корневом классе компонента:

<div class="card">Global font-size-base + component-scoped card vars</div>

Пользовательские свойства в calc()

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

<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>

Адаптивные пользовательские свойства

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

<div class="section">Padding grows to 6rem on wide screens</div>

Пользовательские свойства для анимации

Анимируйте элементы, изменяя пользовательское свойство (часто с помощью JavaScript), вместо изменения нескольких отдельных свойств:

<div class="progress-track">
  <div class="progress"></div>
</div>

Быстрая проверка

Как объявить глобальное пользовательское свойство CSS с именем --accent?

Повторение

Пользовательские свойства CSS объявляются с помощью --name: value, а используются с помощью var(--name). Объявляйте глобальные значения на :root, а область действия значений компонента ограничивайте селекторами компонента. Они динамичны, учитывают каскад и могут изменяться с помощью JavaScript, поэтому значительно мощнее переменных Sass.

Часто задаваемые вопросы

Урок «Объявление и использование пользовательских свойств» бесплатный?

Да — полный текст урока «Объявление и использование пользовательских свойств» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Объявление и использование пользовательских свойств»?

Определяйте пользовательские свойства CSS с префиксом -- и используйте их с помощью функции var(). Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Объявление и использование пользовательских свойств»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Объявление и использование пользовательских свойств
  2. Резервные значения и var()
  3. Ограничение области видимости переменных компонентами
  4. Обновление переменных с помощью JavaScript
← Назад к CSS Academy