Create

Function

@match

Choose a value by condition: @match(x = y, #000, #fff) is black on the diagonal and white elsewhere.

Syntax

  • @match(<condition>, <value> [, <fallback>])
  • @match(<c1>, <v1>, <c2>, <v2>, ..., <fallback>)
condition
An expression over the cell variables x, y, i, X, Y, I, z, Z, dx, dy, dr and the others, plus n, nx, ny and N inside a @m sequence, and custom properties without their --; a cell variable wins a shared name.
value
Returned when the condition is true. With several pairs the first true condition wins.
fallback
Returned when no condition is true. Empty if omitted.

Only the value it returns is evaluated, so @match(@i = 1, @r(10), 0) draws a random number in the first cell alone. Inside $() the same idea is match(condition, value, …, fallback), with the fallback 0 when it is left out. It reads the cell variables there too: $(match(x = 1, 5, 7)).

@match decides when the doodle is generated, so a live value such as @ux reads as 0 in its condition. Inside $(), match() with a live value is written out as CSS math instead, and follows it in the browser: $(match(@ux > 100, 1, 0)).

Inside @svg, a block @match(test) { … } keeps its elements and attributes only where the test holds.

Examples

@grid: 5 / 60vmin _1px;
background: @match(i > 12, #e6437d, #000);
Open in playground 
@grid: 7 / 60vmin _1px;
background: #000;
color: #fff;
@content: @match(x = y, '✓', '');
Open in playground

Several branches:

@grid: 15 / 60vmin _1px;
background: @match(
  dr < 3, #000,
  dr < 5, #e6437d,
  dr < 7, #ebbf4d,
  #eee
);
Open in playground

Inside a sequence:

@grid: 1 / 60vmin;
background: conic-gradient(
  @m12(@match(n % 2 = 0, #000, #fff) 0 @n(*30deg))
);
Open in playground

See also