Create

Function

@pd

Pick the arguments in a shuffled order, one per cell. Every value is used once before the order repeats, so a set of 4 values covers 4 cells without duplicates.

Syntax

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

The shuffle is done once per call site, so a 25-cell grid and @pd with 25 values is a random permutation of them. After a full round the same shuffled order repeats. The shuffle depends on the seed. A ... at the end carries the list on to one value per cell, as in @p. @pick-d is an older name.

The uppercase @PD reads the enclosing sequence step instead.

Examples

@grid: 5 / 60vmin _1px;
background: @pd(#000, #e6437d, #ebbf4d, #fff);
Open in playground

With a ... at the end, every cell gets its own delay, in a shuffled order:

@grid: 8 / 60vmin _2px;
background: #000;
animation: s 1s ease-in-out infinite alternate;
animation-delay: @pd(0s, -.05s, ...);
@keyframes s {
  to { scale: .2 }
}
Open in playground

A random permutation of positions, each used exactly once:

@grid: 5 / 60vmin;
@size: 19%;
@content: @i;
background: #000;
color: #fff;
@place: @pd.m5x5(
  @nx(*20%, -10%) @ny(*20%, -10%)
);
Open in playground

See also