css-doodle

Create

Function

@<Math>

Every function and constant of JavaScript's Math, prefixed with @: @sin, @cos, @abs, @pow, @max, @PI, @E, …

Syntax

  • @sin(<expression>)
  • @max(<expression>, <expression>)
  • @PI, π

Each argument is evaluated as an expression, so @sin(@i / 4) works. Cell values need the @ functions: write @sin(@x * @y), not bare x and y. Results are numbers without units. A bare π is replaced by the number, except after a digit so that 2π means twice pi. Inside $() the same names work without @, and can be chained: $(tan.cos.sin(t)).

Examples

@grid: 5 / 60vmin _1px;
--alpha: calc(
  @abs(@abs(@y - 3) + @abs(@x - 3) - 5) / 5
);
background: rgba(0, 0, 0, var(--alpha));
Open in playground 
@grid: 1x60 / 60vmin;
@size: 65% 1px;
margin: auto;
background: #000;
opacity: @iI;
rotate: -15deg;
translate: calc(@sin(@i/4) * π * 5%);
Open in playground 
@grid: 12 / 60vmin _1px;
background: #000;
opacity: @abs(@sin(@x/2) * @cos(@y/2));
Open in playground

See also