Перечисления и константы

ECSS добавляет две именованные сущности: @enum — набор допустимых значений для параметра, и @const — переиспользуемое значение (токен).

Перечисления (@enum)

@enum задаёт замкнутый список строковых значений. Используется как тип параметра: компонент примет только эти значения, остальное TypeScript отклонит.

@enum Variant {
  values: "primary", "secondary", "ghost";
}

@block Button {
  @param --variant Variant;

  @if (--variant == "primary") {
    background: #646cff;
  }
}

Перечисления можно расширять через extends — потомок добавляет значения к набору родителя:

@enum BaseSize {
  values: "sm", "md", "lg";
}

@enum ButtonSize extends BaseSize {
  values: "xl"; // итог: sm, md, lg, xl
}

Константы (@const)

@const — это именованное значение с типом. Объявляется на верхнем уровне или внутри блока и подставляется по имени (без var()):

@const --gap unit: 8px;
@const --primary color: #646cff;

@block Card {
  padding: --gap;
  border: 1px solid --primary;
}

Константы удобно выносить в отдельный файл-токены и импортировать (см. Модульная система).

Что выбрать

• @enum — когда нужен ограниченный список вариантов для параметра (тема, размер, тон).
• @const — когда нужно переиспользовать конкретное значение (отступ, цвет, радиус) в разных местах.

Что дальше?

• @enum · @const — справочники
• Типы данных — все типы параметров
• Параметры и состояния — использование перечислений в @param