css-doodle

Create

Function

@m, @M, @rep

Repeat a value a number of times. @m joins the copies with commas, @M with spaces, and @rep with nothing. Inside the value, @n is the current step.

Syntax

  • @m(<count>, <value>), @m<count>(<value>)
  • @M(<count>, <value>), @M<count>(<value>)
  • @rep(<count>, <value>), @rep<count>(<value>)
count
A number of steps, a range like 3-5 (either direction), a grid like 2x3 where @nx and @ny give the column and row, or an expression.
value
Evaluated once per step. Several arguments are all emitted per step, comma-separated: @m2(a, b) is a,b,a,b.

Random and pick functions inside the value are re-evaluated on every step. The count is capped at 65536. @multiple and @repeat are older names of @m and @rep.

Examples

Stacked shadows:

@grid: 5 / 60vmin _1px;
background: #000;
margin: 20%;
box-shadow: @m5(
  @n(*2px) @n(*2px) 0 #e6437d
);
Open in playground

Gradient stops:

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

Polygon points with @M, and a random hex color with @rep:

@grid: 4 / 60vmin _1px;
background: #@rep6(@p([0-9a-f]));
clip-path: polygon(
  @m3(@M2(@r(100%)))
);
Open in playground

A range counts up or down:

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

See also