@reverse
The arguments in reverse order, or an SVG path with its commands reversed.
Syntax
- @reverse(<value>, ...)
- @reverse(<path data>)
When the arguments parse as SVG path data the commands are emitted from last to first,
with a leading moveto and a closing z kept in place; otherwise the argument list is reversed.
Examples
@grid: 5x1 / 60vmin _1px;
background: @pn.reverse(#000, #333, #666, #999, #ccc);@grid: 1x2 / 60vmin _2px;
--colors: #000, #e6437d, #ebbf4d;
@cell(1) {
background: linear-gradient(90deg, $colors);
}
@cell(2) {
background: linear-gradient(90deg, @reverse.$colors);
}@grid: 4 / 60vmin _2px;
background: @svg(
viewBox: -2 -2 34 34;
--path: M 0 0 h 10 v 10 h 5 v 5 h 10 v 10;
path {
d: @p($path, @reverse.$path);
fill: none;
stroke: #000;
stroke-width: 3;
}
);