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

Руководство Unity 2020.3 (LTS)
Создание пользовательских интерфейсов (UI)
Набор инструментов UI
Таблицы стилей Unity (USS)
Пользовательские свойства USS (переменные)

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

Чтобы создать переменную USS, поставьте перед ее именем двойной дефис (--).

--color-1: red;

Чтобы использовать значение переменной USS в другом правиле USS, вызовите его с помощью функции var().

var(--color-1);

Примечание:
Функция `var()` также принимает необязательное значение по умолчанию (см. Указание значений по умолчанию ниже).

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

Например, следующий фрагмент USS определяет одно правило стиля, в котором объявляются две переменные цвета, и два правила стиля, использующие эти переменные.

:root {
  --color-1: blue;
  --color-2: yellow;
}

.paragraph-regular {
  color: var(--color-1);
  background: var(--color-2);
  padding: 2px;
  }

.paragraph-reverse {
  color: var(--color-2);
  background: var(--color-1);
  padding: 2px;
  }

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

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

Указание значений по умолчанию

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

Чтобы указать значение по умолчанию для переменной, добавьте его после значения переменной через запятую ,. Следующий фрагмент кода USS вызывает переменную --color-1, но если система пользовательского интерфейса не может ее разрешить, она использует шестнадцатеричное значение для красного цвета (#FF0000).

var(--color-1, #FF0000);

Встроенные переменные Unity

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

Отличия от CSS

Переменные работают в USS почти так же, как и в CSS. Подробную информацию о переменных CSS см. в документации MDN.

Вызов переменных USS из других функций

Некоторые веб-браузеры поддерживают использование функции var() внутри других функций, как показано в объявлении свойства ниже:

background-color: rgb(var(--red), 0, 0);

Unity не поддерживает такое использование var().

Объявление переменных в корневом селекторе

Распространенной практикой CSS является объявление «глобальных» переменных в селекторе псевдокласса :root. Поскольку каждый элемент на веб-странице наследуется от :root, каждый селектор в таблице стилей CSS может вызывать объявленные там переменные.

В Unity объявление переменных в :root работает для окон редактора и панелей среды выполнения при условии, что вы присоединяете таблицу стилей к корневому визуальному элементу панели или окна редактора. Это не работает для Inspectorокна Unity, в котором отображается информация о текущем выбранном игровом объекте, активе или настройках проекта, что позволяет вам проверить и отредактировать значения. Дополнительная информация
См. в интерфейсе Словарь.

В Инспекторе псевдокласс :root активен только в корневом VisualElement окна Инспектора. Поддеревья, к которым вы прикрепляете таблицы стилей, находятся намного ниже в иерархии Инспектора. Следовательно, селектор :root никогда не соответствует какой-либо части поддерева.

Имитация :root для пользовательского интерфейса инспектора

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

Например, следующий фрагмент USS определяет следующие классы:

.root объявляет переменную.
.label1 вызывает переменную.

.root {
    --color1: rgb(25, 255, 75);
}

.label1 {
    color: var(--color1);
}

Следующий фрагмент кода UXML создает простой элемент-контейнер и назначает ему корневой класс. Контейнер имеет дочерний элемент Label с назначенным ему классом label1.

В UXML:

<UXML xmlns="UnityEngine.UIElements">
    <VisualElement class="root">
        <!-- Including, for example... -->
        <Label class="label1" text="Label text"/>
    </VisualElement>
</UXML>

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

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