Create

Function

@pn, @pnr

Pick the arguments in order, one per cell, starting over at the end. @pnr goes backwards.

Syntax

  • @pn(<value>, ...)
  • @pn([<range>])
  • @pn(<value>, <value>, ...)
  • @pnr(<value>, ...)

Each call site keeps its own counter, advanced once per cell, or once per step inside a @m sequence. Ranges expand as for @p. @pl, @pr and @pick-n are older names.

A ... at the end carries the list on with the gap of the last two values instead of starting over, so @pn(0, 90deg, ...) gives 0, 90deg, 180deg, 270deg, 360deg, …. @pnr runs it on to one value per cell, then walks back, so on 4 cells @pnr(1, 2, ...) gives 4, 3, 2, 1. Between two values, ... fills in the gap as in @p. A value followed by x and a count plays that many times in a row: @pn(a x2, b) gives a, a, b.

The uppercase @PN, @PNR read the enclosing sequence step instead.

Examples

@grid: 5 / 60vmin _1px;
background: @pn(#000, #e6437d, #ebbf4d, #fff);
Open in playground 
@grid: 5 / 60vmin _1px;
background: #000;
color: #fff;
@content: @pn([1-9]);
Open in playground

Forward and backward in the same grid:

@grid: 6 / 60vmin _1px;
background: #000;
@cell(y % 2 = 1) {
  opacity: @pn(.2, .4, .6, .8, 1);
}
@cell(y % 2 = 0) {
  opacity: @pnr(.2, .4, .6, .8, 1);
}
Open in playground

With a ... at the end, each cell goes one step further:

@grid: 1x24 / 60vmin;
@place: center;
@size: @pn(100%, 96%, ...);
border: 1px solid #000;
rotate: @pn(0, 4deg, ...);
Open in playground

Inside a sequence, one value per step:

@grid: 1 / 60vmin;
background: linear-gradient(
  45deg,
  @m4(@pn(#000, #e6437d, #ebbf4d, #fff) 0 @n(*25%))
);
Open in playground

See also