Enums and Constants

ECSS adds two named entities: @enum — a set of allowed values for a parameter, and @const — a reusable value (a token).

Enums (@enum)

@enum defines a closed list of string values. It is used as the type of a parameter: the component will accept only these values, and TypeScript rejects everything else.

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

@block Button {
  @param --variant Variant;

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

Enums can be extended via extends — the descendant adds values to the parent's set:

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

@enum ButtonSize extends BaseSize {
  values: "xl"; // result: sm, md, lg, xl
}

Constants (@const)

@const is a named value with a type. It is declared at the top level or inside a block and substituted by name (without var()):

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

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

Constants are convenient to move into a separate token file and import (see Module System).

Which to choose

• @enum — when you need a limited list of variants for a parameter (theme, size, tone).
• @const — when you need to reuse a specific value (spacing, color, radius) in different places.

Next steps

• @enum · @const — references
• Data types — all parameter types
• Parameters and States — using enums in @param