@if / elseif / else

@if evaluates a condition at compile time and produces or skips CSS.

Compile-time condition

@if runs at compile time, not at runtime. If a variable value cannot be known at compile time, the else branch becomes active.

---

Syntax

@if(condition) {
  /* produced if condition is true */
}
elseif(condition) {
  /* produced if first condition is false and this one is true */
}
else {
  /* produced if none are true */
}

---

Basic Usage

--theme: { accent: #00245a; };

@if(var(--theme.accent) === '#00245a') {
  .flag { color: #0c2b61; }
}
elseif(var(--theme.accent) === '#111111') {
  .flag { color: #222222; }
}
else {
  .flag { color: #333333; }
}

Since --theme.accent is #00245a, the first branch is produced.

Generated CSS:

.flag { color: #0c2b61; }

---

Supported Operators

Operator	Meaning
===	Equal
!==	Not equal
>	Greater than
>=	Greater than or equal
<	Less than
<=	Less than or equal
&&	And
||	Or

Condition literal notes:

• Word-like strings can be written without quotes: light, dark
• Quoted strings are also valid: 'light', "dark"
• === and !== do string comparison
• For >, >=, <, <=, number-looking strings like '1' or "1" are converted to numbers for comparison

---

Condition Grouping With Parentheses

Parentheses can be used for complex conditions.

--valuea: 2;
--valueb: 3;
--valuec: light;

@if((var(--valuea) > 1 || var(--valueb) === 4) && var(--valuec) === light) {
  .flag { color: #0c2b61; }
}

--valuea > 1 is true so the left parenthesis group is true, and --valuec === light is also true — the condition is satisfied.

Generated CSS:

.flag { color: #0c2b61; }

---

Compile-Time Arithmetic Condition

Compile-time arithmetic and array index access are supported inside conditions.

--valuea: 1;
--valueb: 2;
--range: [1-5];

@if(var(--valuea) + var(--valueb) === 3) {
  .sum-ok { color: #0c2b61; }
}

@if(var(--range[2]) > "1") {
  .range-ok { color: #0c2b61; }
}

1 + 2 === 3 is true, --range[2] is 3 and 3 > 1 is true — both rules are produced.

Generated CSS:

.sum-ok   { color: #0c2b61; }
.range-ok { color: #0c2b61; }

Note

For expression forms and operator precedence that can be used inside conditions, go to the Expression Engine page.

---

@if Inside @for

@if can be used inside a @for block. The condition is evaluated independently on each iteration.

--sizes: [sm, md, lg];

@for(size, var(--sizes)) {
  @if(${size} === 'sm') {
    .btn-${size} { padding: 4px 8px; }
  }
  elseif(${size} === 'md') {
    .btn-${size} { padding: 8px 16px; }
  }
  else {
    .btn-${size} { padding: 12px 24px; }
  }
}

Generated CSS:

.btn-sm { padding: 4px 8px; }
.btn-md { padding: 8px 16px; }
.btn-lg { padding: 12px 24px; }

---

Usage With Observed Selectors

Observed selectors inside an @if block are also evaluated according to the compile-time condition. Only the branch where the condition is true is carried to runtime; the false branch is never produced.

--mode: wide;

@if(var(--mode) === 'wide') {
  #panel? { display: block; }
}
else {
  #panel? { display: none; }
}

Since --mode is wide, only the display: block rule is produced and carried to runtime.

Note

For observed selector semantics, see the Observed pages.