Создание переменных USS
Переменные облегчают управление стилями для сложного UI, где несколько правил, иногда в разных таблицах стилей, используют одни и те же значения.
Можно создать переменные USS и использовать их в других свойствах USS. При обновлении переменной USS обновляются все свойства USS, использующие эту переменную. Также можно указать значения по умолчанию для переменных USS.
Создание и назначение переменных USS
Переменную USS можно создать и назначить в файлах , UI Builder, или непосредственно в файле USS.
Для создания переменной USS в файле USS, префиксируйте её имя двойным дефисом (--).
--color-1: red;
Чтобы использовать значение переменной USS в другом правиле USS, используйте функцию var() для ее вызова.
var(--color-1);
При обновлении переменной она обновляет все свойства 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;
}
Указать значения по умолчанию для переменных USS
Функция var() принимает необязательное значение по умолчанию. Система UI использует значение по умолчанию, когда она не может разрешить переменную. Например, система UI использует значение по умолчанию, если вы удаляете переменную из таблицы стилей, но забыли удалить ссылку на нее.
Чтобы указать значение по умолчанию для переменной, добавьте его после значения переменной, разделив запятой ,.
Следующий фрагмент USS вызывает переменную --color-1. Если система UI не может разрешить эту переменную, она использует шестнадцатеричное значение red (#FF0000).
var(--color-1, #FF0000);
Отличия от переменных CSS
Переменные в USS работают в основном так же, как и в CSS.. Подробную информацию о переменных CSS см. в документации MDN. Однако USS не поддерживает некоторые функции CSS:
- USS не поддерживает функцию
var()внутри других функций, таких как следующие:
background-color: rgb(var(--red), 0, 0);
- USS не поддерживает математические операции над переменным.