css-doodle

Create

Function

@i, @I

@i is the index of the current cell, counted from 1 in reading order. @I is the number of cells.

Syntax

  • @i, @i(<operation>, ...), @i<number>
  • @I, @I(<operation>, ...)
operation
An operator and a value, applied to the index: *2, -1, /3, %4. An operator at the end puts the index on the right: 2/ is 2 / @i. A value without an operator is added. Several operations apply left to right.
number
Digits glued to the name are the first argument: @i5 is @i(5), which adds 5.

A unit on any value is carried to the result, so @i(*10px) is a length. @index is an alias of @i. As a function, @size is a legacy name for @I; the @size property is different. The other cell functions, @x, @y, @z and the @n family, take the same operations.

WrittenValue for the 3rd cell
@i3
@i(-1)2
@i(*10px)30px
@i(2/)0.666…
@i(*2, +10)16
@i(%2)1
@I(-@i, +1)I − i + 1, the index counted backwards

Examples

@grid: 5 / 60vmin _1px;
background: #000;
color: #fff;
@content: @i;
Open in playground

Counting from 0, and counting backwards:

@grid: 5 / 60vmin _1px;
background: #000;
color: #fff;

@cell(y < 3) {
  @content: @i(-1);
}
@cell(y > 3) {
  @content: @I(-@i, +1);
}
Open in playground

Deriving a length from the index:

@grid: 1x10 / 60vmin;
border: 1px solid #000;
font-size: 80%;
margin: auto;
line-height: 1;

width: @i(*10%);
@content: @i;
Open in playground

See also