#:doodle

The :doodle
is a special selector indicates to the component element itself.
Note that the styles would be over-written by your normal css files outside.
(try to hover on the doodle)

:doodle {
@grid: 5 / 7em;
–s: 0;
}
:doodle(:hover) {
–s: 1;
}
–offset: calc(var(–s) * 100%);
transform: translateY(var(–offset));
will-change: transform;
transition: .5s cubic-bezier(.175, .885, .32, 1.275) @rand(500ms);

transform-origin: 50% 50%;
background: #60569e;
margin: .5px;

#@even

Select cells like :nth-child(even) but shorter.

:doodle {
@size: 7em;
}
@even {
background: #60569e;
:after {
content: ‘@index()’;
font-size: .7em;
color: #fff;
}
}

#@odd

Select cells like :nth-child(odd).

:doodle {
@size: 7em;
}
@odd {
background: #60569e;
:after {
content: ‘@index()’;
font-size: .7em;
color: #fff;
}
}

#@nth(n)

Select the nth cell like :nth-child(n).

:doodle {
@size: 7em;
}
background: #f5f5f5;
margin: .5px;
@nth(9) {
background: #60569e;
:after {
content: ‘@index()’;
font-size: .7em;
color: #fff;
}
}

#@at(x, y)

Select by coordinate.

:doodle {
@size: 7em;
}
background: #f5f5f5;
margin: .5px;
@at(4, 2) {
background: #60569e;
:after {
content: ‘@row(), @col()’;
font-size: .5em;
color: #fff;
}
}

#@random

Select cells randomly.

:doodle {
@size: 7em;
}
background: #f5f5f5;
transition: .2s;
@random {
background: #60569e;
:after {
content: ‘@index()’;
font-size: .7em;
color: #fff;
}
}
margin: .5px;

#@row(n)

Select the nth row of the grid.

:doodle {
@size: 7em;
}
background: #f5f5f5;
margin: .5px;
@row(3) {
background: #60569e;
:after {
content: ‘@row()’;
font-size: .7em;
color: #fff;
}
}

The odd and even is supported.

:doodle {
@size: 7em;
}
background: #f5f5f5;
margin: .5px;
@row(even) {
background: #60569e;
:after {
content: ‘@row()’;
font-size: .7em;
color: #fff;
}
}
@row(even) {
:after {
content: ‘@row()’;
font-size: .7em;
color: #fff;
}
}

#@col(n)

Select the nth column of the grid.

:doodle {
@size: 7em;
}
background: #f5f5f5;
margin: .5px;
@col(3) {
background: #60569e;
:after {
content: ‘@col()’;
font-size: .7em;
color: #fff;
}
}

You can use odd and even too.

:doodle {
@size: 7em;
}
background: #f5f5f5;
margin: .5px;
@col(odd) {
background: #60569e;
:after {
content: ‘@col()’;
font-size: .7em;
color: #fff;
}
}