css-doodle

Create

Function

@z, @Z

@z is the depth of the current cell, counted from 1, and @Z the depth count. A third grid number nests cells inside cells.

Syntax

  • @z, @z(<operation>, ...)
  • @Z, @Z(<operation>, ...)

Without a third number the depth is 1. 1x1xN is a chain: each cell contains the next. Any other size with depth is a tree: each cell holds another copy of the x × y grid. See the grid attribute.

Depth is clamped so the leaf count stays within 4096, or 65536 with experimental. A large depth grid can freeze the browser. @depth is an alias of @z. Operations work as for @i. A block @z(n) { } selects every cell at that depth.

Examples

A 1x3 tree. Each cell holds another 1x3 grid:

@grid: 1x3x4 / 60vmin;
@size: 50%;
position: absolute;
bottom: 0;
left: @pn(50%, 0);

clip-path: polygon(50% 0, 100% 100%, 0 100%);

&:first-child {
  top: 0;
  transform: translateX(-50%);
}
&:empty {
  background: #000;
}
Open in playground

A 1x2 tree. @z(1) styles the root:

@grid: 1x2x10 / 60vmin;

@size: 100%;
position: absolute;
bottom: 90%;
left: 0;
transform-origin: 50% 100%;
transform: rotate(@pn(26deg, -20deg)) scale(.72);
background: #000;

@z(1) {
  bottom: 0;
  left: 50%;
  width: 4.4%;
  height: 26%;
  transform: none;
}
Open in playground

See also