@cycle
All rotations of a list: @cycle(a, b, c) is the three lists a, b, c, b, c, a and c, a, b.
Combine it with a pick function to choose one.
Syntax
- @p.cycle(<value>, ...)
- @p.cycle(<value> <value> ...)
- @pn.cycle(<value>, ...)
With several arguments the rotations are comma-separated lists; with a single space-separated argument
they are space-separated, which suits shorthand properties like border-radius.
Examples
@grid: 5 / 60vmin _2px;
background: #000;
border-radius: @p.cycle(100% 0 0 0);Stepping through the rotations in order:
@grid: 1x4 / 60vmin _2px;
@content: @pn.cycle(1 2 3 4);
background: #000;
color: #fff;
font-size: 1.5em;