@const

Директива @const объявляет именованную константу.

Синтаксис

На верхнем уровне файла:

@const --name Type: value;

Внутри @block:

@block Button {
  @const --name Type: value;
}

Имя начинается с --, тип указывается явно. Все поддерживаемые типы описаны в справочнике типов данных.

Область видимости

• Константа на верхнем уровне видна всему файлу и может быть импортирована в другие файлы через @import.
• Константа внутри @block видна только этому блоку.
• Объявить константу с тем же именем, что уже есть в области видимости — ошибка.

Использование в CSS

Константа подставляется в значения CSS-деклараций по имени:

@const --primary color: #646cff;
@const --radius unit: 6px;

@block Button {
  background: --primary;
  border-radius: --radius;
  color: #fff;
}

Использование в @if

Константу можно использовать в условиях @if — например, сравнить параметр с константой:

@const --brand color: #646cff;

@block Button {
  @param --color? color;

  @if (--color == --brand) {
    font-weight: 600;
  }
}

Импорт

Константу можно объявить в одном файле и импортировать в другие через @import:

// tokens.ecss
@const --primary color: #646cff;
@const --danger color: #e53e3e;

// Button.ecss
@import { --primary, --danger } from "./tokens.ecss";

@block Button {
  @param --variant Variant;

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

  @if (--variant == "danger") {
    background: --danger;
  }
}

Пример

@const --color-primary color: #646cff;
@const --color-danger color: #e53e3e;

@const --spacing-sm unit: 4px;
@const --spacing-md unit: 8px;
@const --spacing-lg unit: 16px;

@const --radius unit: 6px;

@block Button {
  padding: --spacing-md --spacing-lg;
  background: --color-primary;
  border-radius: --radius;
  color: #fff;
}

@block DangerButton {
  padding: --spacing-md --spacing-lg;
  background: --color-danger;
  border-radius: --radius;
  color: #fff;
}

См. также

• Типы данных — описание всех поддерживаемых типов
• @import — импорт констант из других файлов
• @if — использование констант в условиях
• @debug — вывод значений констант при отладке