css-doodle

Create

Function

@n, @N, @nx, @ny

The current step inside a @m, @M or @rep sequence. @n counts from 1, @N is the number of steps, and for a 2x3 style count @nx and @ny are the column and row of the step.

Syntax

  • @m5(@n), @m5(@n(<operation>, ...))
  • @m2x3(@nx @ny), @m2x3(@nx(<operation>, ...) @ny(<operation>, ...))
  • @m5(@N), @m5(@N(<operation>, ...))

Operations work as for @i: @n(*10%), @N(-@n, +1). With a range count like 3-5, @n takes the values of the range. Outside a sequence the functions are left as written.

Examples

@grid: 1 / 60vmin;
background: #000;
color: #fff;
font-size: 1.5em;
@content: @m5(@n);
Open in playground

Concentric rings:

@grid: 1 / 60vmin;
background: radial-gradient(
  @m10(
    @p(#000, #e6437d, #ebbf4d) @n(*10%),
    #0000 0
  )
);
Open in playground

Positions from a 2D sequence:

@grid: 1 / 60vmin;
background:
  @m4x4(
    radial-gradient(#000 50%, #0000 0)
    @nx(*25%, -12.5%) @ny(*25%, -12.5%)
    / 20% 20% no-repeat
  );
Open in playground

See also