Functions

info

This section refers to functions defined in stylesheets. For importing functions from other languages, see the @-use and @-from at-rules.

In Jess, functions are anonymous mixins that return a single value. We indicate we want a single value with >, and the return value is then assigned with result. (This matches the CSS @function spec, where the return descriptor is result:.)

// Define a function
$my-function: @() > {
  result: $(1 + 2);
}

// Call a function
value: $my-function(); // 3

Like arrow functions in JavaScript, anonymous functions can also return a single expression.

$my-function: @() > $(1 + 2);

value: $my-function(); // 3

No early returns

Functions do not have "early" returns — the last result: assignment wins. A result: inside an $if branch does not short-circuit; evaluation continues, and a later result: overrides it. For example:

$my-function: @() > {
  $if(true) {
    result: one;
  }
  result: two;
}
// value is `two` — the last result: assignment wins

Think of functions like "mixins that look up the final assignment to a property named result".