@dx, @dy, @dr, @dc, @dm, @da, @db
Where the cell is relative to the center of the grid, measured in cells.
Syntax
| Function | Value |
|---|---|
@dx | horizontal offset from the center: x - .5 - X / 2 |
@dy | vertical offset from the center: y - .5 - Y / 2 |
@dr | Euclidean distance, sqrt(dx² + dy²) |
@dc | Chebyshev distance, max(|dx|, |dy|), square rings |
@dm | Manhattan distance, |dx| + |dy|, diamond rings |
@da | angle from the center, atan2(dy, dx) in radians |
@db | distance to the nearest edge, 0 on the border |
On a 5-wide grid @dx is -2, -1, 0, 1, 2; on a 4-wide grid it is -1.5, -.5, .5, 1.5.
All of them accept operations like @i, for example @dr(*10%).
The same names are variables in @match and @cell.
Examples
@grid: 7 / 60vmin _1px;
background: #000;
color: #fff;
font-size: .8em;
@content: @dx;Rings by Manhattan distance:
@grid: 15 / 60vmin _1px;
background: #000;
opacity: @dm(/14);Pointing at the center with the angle:
@grid: 9 / 60vmin;
@size: 70% 2px;
background: #000;
rotate: @da(*1rad);
margin: auto;
@cell(dr < 1) {
@size: 30%;
border-radius: 50%;
}Fading in from the border:
@grid: 13 / 60vmin _1px;
background: #000;
opacity: @db(/6);