---
title: Переменные
description: Переменные дизайна, коллекции, режимы и привязка цветов в OpenPencil.
---

# Переменные

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

## Открытие диалога переменных

Откройте его через **Вид → Переменные…**, найдите «Переменные» в палитре команд или, если ничего не выделено, откройте раздел «Переменные» на вкладке «Дизайн». Кнопка **Развернуть** в углу диалога отдаёт ему большую часть окна.

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

## Коллекции

Переменные объединяются в коллекции. В широком диалоге они перечислены на боковой панели с числом переменных в каждой; в более узком — вкладками, а на телефоне — меню.

- **Переключить коллекцию:** щёлкните её на боковой панели или её вкладку
- **Создать коллекцию:** нажмите **+** рядом с **Коллекции** или кнопку с папкой на панели инструментов (**Создать коллекцию**)
- **Переименовать или удалить:** если переменная не выбрана, справа редактируется коллекция: измените её имя или удалите её через меню **⋯** рядом с именем (**Удалить коллекцию**)
- **Атрибут переключения:** атрибут, который включает режимы, переключаемые вручную, по умолчанию `data-theme` для коллекции Theme; укажите другое имя, например `data-color-scheme`, чтобы оно совпадало с существующим кодом

## Режимы

В каждой коллекции может быть несколько режимов (например, Light и Dark). Режимы отображаются в списке столбцами значений, а у переменной есть значение для каждого режима. Управлять ими можно в разделе **Настройки коллекции**:

- **Добавить режим:** нажмите **+** рядом с разделом **Режимы**
- **Переименовать:** измените имя режима
- **Дублировать, сделать основным, удалить:** используйте меню **⋯** рядом с режимом (**Дублировать режим**, **Сделать основным**, **Удалить режим**)

Основной режим — **Всегда включён**, он попадает в `:root`. У каждого другого режима есть **Применяется, когда**: это определяет, когда режим вступает в силу в экспортированной таблице стилей; получающийся CSS показан ниже:

| Применяется, когда | CSS |
| --- | --- |
| **переключено вручную** | атрибут переключения коллекции со значением режима, например `[data-theme="dark"]` для режима Dark коллекции Theme |
| **система в тёмном режиме** / **система в светлом режиме** | `@media (prefers-color-scheme: dark)` / `light` |
| **включён высокий контраст** | `@media (prefers-contrast: more)` |
| **включено уменьшение движения** | `@media (prefers-reduced-motion: reduce)` |
| **экран уже, чем** / **экран шире, чем** ширина | `@media (max-width: 640px)` / `min-width` |
| **контейнер уже, чем** / **контейнер шире, чем** ширина | `@container (max-width: 640px)` / `min-width` |
| **Свой CSS** | любой селектор или запрос `@media`, `@supports` либо `@container` |

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

## Работа с переменными

Переменные группируются по папкам в их именах (`Brand/Primary` отображается как *Primary* в папке *Brand*) и показываются с именем CSS и значением для каждого режима.

- **Создать переменную:** нажмите **Создать переменную** (или **+**) и выберите тип; новая переменная откроется для редактирования
- **Выбрать:** щёлкните строку или перемещайтесь стрелками и нажмите Enter. Щелчок с Shift выделяет диапазон, а щелчок с Cmd (Ctrl в Windows и Linux) добавляет строку или убирает её из выделения
- **Фильтровать:** введите текст в строке поиска, чтобы отфильтровать по имени, CSS-имени, описанию или значению, например `--color-brand`, шестнадцатеричному цвету или переменной, на которую указывает алиас, с той же терпимостью к опечаткам, что и в палитре команд; щёлкните группу на боковой панели, чтобы показать только её и вложенные в неё группы, или нажмите кнопку фильтра (**Фильтр по типу**), чтобы показать только некоторые типы
- **Переименовать или изменить на месте:** дважды щёлкните имя или числовое или текстовое значение в списке
- **Правая кнопка мыши:** переименовать, дублировать (**Дублировать**), переместить в группу или в новую группу (**Переместить в группу**, **Новая группа…**) либо удалить (**Удалить переменные**) выбранные переменные; их удаляют также Delete и Backspace
- **Изменить порядок:** перетащите строку; порядок сохраняется в файле
- **Выбрано несколько:** справа их можно переместить в группу, дублировать или удалить
- **Отмена и повтор:** Cmd+Z и Cmd+Shift+Z или Cmd+Y (Ctrl в Windows и Linux) работают в диалоге так же, как на холсте, по одному шагу на изменение. Enter применяет поле и возвращает к списку; пока в поле есть неприменённый текст, Cmd+Z отменяет ввод

При выборе переменной можно редактировать:

- **Имя** и **Имя CSS:** оставьте имя CSS пустым, чтобы получить его из имени и областей применения, например `--color-brand-primary`. Вводите имя без `--`; имя, которое CSS не может использовать, помечается и не сохраняется
- **Единица:** для чисел `px`, `rem`, `%`, `ms`, `s`, `deg` или без единицы; значения вводятся в этой единице
- **Значение** или **Значения:** по одному для каждого режима; цвет открывает выбор цвета. Кнопка переменной (**Использовать переменную**) рядом со значением направляет его на другую переменную того же типа — псевдоним, который следует за этой переменной; **Открепить переменную** возвращает значение, которое он показывал
- **Выражение CSS:** для чисел значение вроде `clamp(1rem, 4vw, 1.5rem)`, которое записывается в CSS вместо числа, а холст продолжает рисовать число
- **Области применения:** для каких свойств предлагается переменная
- **Описание**
- **Скрыть при публикации:** файлы, которые используют этот как библиотеку, не видят переменную

## Таблица стилей

Внизу диалога активная коллекция показана как пользовательские свойства CSS. Кнопка копирования (**Копировать все переменные как CSS**) копирует переменные всего документа как CSS или как тему Tailwind v4 (**Копировать все переменные как тему Tailwind**), поэтому ссылки на другие коллекции разрешаются.

## Привязка переменных к заливке

В разделе «Заливка» панели свойств используйте выбор переменной, чтобы привязать цветовую переменную к заливке объекта.

- **Привязать:** выберите цветовую переменную в списке. У заливки появится фиолетовая метка с именем переменной.
- **Отвязать:** нажмите кнопку отвязки на метке, чтобы удалить привязку. Заливка вернётся к вычисленному значению цвета.

Когда значение переменной меняется (или при переключении режима), все привязанные заливки обновляются автоматически.

## Советы

- Объединяйте связанные токены в коллекции, например `Primitives` для исходных цветов, `Semantic` для смысловых псевдонимов и `Spacing` для значений макета.
- Режимы удобны для переключения тем: значения Light и Dark можно задать в одной коллекции.
- Переменные поддерживают псевдонимы: коллекция `Semantic` может ссылаться на значения из коллекции `Primitives`.
- Работа с заливками и выбором цвета описана в разделе [Фигуры](./drawing-shapes).