@const

The @const directive declares a named constant.

Syntax

At the top level of a file:

@const --name Type: value;

Inside a @block:

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

The name starts with --, and the type is specified explicitly. All supported types are described in the data types reference.

Scope

• A top-level constant is visible to the entire file and can be imported into other files via @import.
• A constant inside a @block is visible only to that block.
• Declaring a constant with the same name as one already in scope is an error.

Usage in CSS

A constant is substituted into CSS declaration values by name:

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

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

Usage in @if

A constant can be used in @if conditions — for example, to compare a parameter against a constant:

@const --brand color: #646cff;

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

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

Import

A constant can be declared in one file and imported into others via @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;
  }
}

Example

@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;
}

See also

• Data types — description of all supported types
• @import — importing constants from other files
• @if — using constants in conditions
• @debug — printing constant values when debugging