css-doodle

Create

Function

$ (calc)

Evaluate an arithmetic expression at generation time, with custom properties as variables. $(1 + 2) is 3; $px(@i * 10) is 10px, 20px, …

Syntax

  • $(<expression>)
  • $<unit>(<expression>)
  • $<name>
expression
Numbers, + - * / % ^, comparisons, && and ||, parentheses, Math functions, gcd() and match(). Adjacent values multiply: 2x, 2π, (1+2)(3). Other functions like @i or @r are evaluated first.
unit
Appended verbatim to the result: $px(1+1) is 2px, $deg(...), $%(...).
name
Without parentheses, the value of the custom property --name as css-doodle sees it: an arithmetic value is evaluated, anything else passes through as written.

Variables are the custom properties declared on :doodle, :container or the cell, without their -- prefix, plus the --name declarations of an enclosing @svg. A value with a unit reads as the bare number, so --w: 10px gives w = 10. Unknown names read as 0; there are no errors. @calc() is an older name for the same function. See Expressions for the full rules.

Examples

@grid: 5 / 60vmin _1px;
background: #000;
color: #fff;
@content: $(@i * 2);
Open in playground

Custom properties drop their -- prefix and any unit, so --step: 10% is step = 10: 

@grid: 1x10 / 60vmin;
background: #000;
--step: 10%;
width: $%(step * @i);
Open in playground

A unit after $ is appended to the result:

@grid: 1x12 / 60vmin;
@place: center;
@size: 40% 3px;
background: #000;
margin: auto;
transform-origin: 0 50%;
rotate: $deg(360 / @I * @i);
Open in playground

Without parentheses, $name is the custom property --name: arithmetic is evaluated, anything else passes through. 

@grid: 5 / 60vmin _1px;
--ink: @p(#000, #e6437d);
--n: @i * @i;
background: $ink;
color: #fff;
@content: $n;
Open in playground

See also