css-doodle

Create

Selector

@cell

One selector for every way of picking cells: by index, by expression, or at random. It covers what @nth, @at, @row, @col, @even, @odd, @random and @match do.

Syntax

  • @cell(<index>, ...) { }
  • @cell(<expression>, ...) { }
  • @cell(random [ratio | count]) { }
  • @cell not (...) { }
  • @cell { }
index
A number, an an+b formula, or odd / even. The keywords select a checkerboard, like @even and @odd; use i % 2 = 0 for index parity.
expression
An expression over x, y, i, dr and the other cell variables. The cell matches when it is true.
random
The keyword alone picks each cell with probability .5. Follow it with a ratio below 1, or a count of cells to pick, as in @random.

Several arguments are combined with or. The not keyword before the parentheses inverts the result. With no arguments every cell matches, which is handy for grouping rules.

Examples

By index, or several indexes at once:

@grid: 5x5 / 60vmin _1px;
@content: @i;

@cell(1, 2, 3n) {
  background: #000;
  color: #fff;
}
Open in playground

By column, row, or a point:

@grid: 5x5 / 60vmin _1px;
@content: @x, @y;

@cell(x = 2, y = 3) {
  background: #000;
  color: #fff;
}
@cell(x = 4 && y = 4) {
  background: #e6437d;
  color: #fff;
}
Open in playground

By an expression over the cell variables. dr is the distance from the centre:

@grid: 15 / 60vmin;
@cell(dr < 3) {
  background: #000;
}
@cell(dr > 5 && dr < 6) {
  background: #e6437d;
}
Open in playground

At random, here exactly three cells:

@grid: 5x5 / 60vmin _1px;
@content: @i;

@cell(random 3) {
  background: #000;
  color: #fff;
}
Open in playground

Invert with not:

@grid: 5x5 / 60vmin _1px;
@content: @i;

@cell not (2n, x = 1) {
  background: #000;
  color: #fff;
}
Open in playground

See also