Skip to main content

Expressions

Jess supports expressions, which are used to evaluate values, perform calculations, and more.

In Jess, an Expression is always written as $(...).

  • $var is a variable Reference (not an Expression).
  • $(...) is an Expression.

If you need to evaluate a variable inside an expression, use $($var).

Examples​

1. Basic arithmetic​

value: $(1 + 2); // 3
value: $(1 - 2); // -1
value: $(1 * 2); // 2
value: $(1 / 2); // 0.5
value: $(1 % 2); // 1 (modulus)

2. String concatenation​

value: $("Hello, " + "world!"); // "Hello, world!"

3. Comparison operations​

value: $(1 > 2); // false
value: $(1 < 2); // true
value: $(1 >= 2); // false
value: $(1 <= 2); // true

4. Support for unique CSS values​

value: $(#222 / 2); // #111

5. Use with Jess variables​

$width: 10px;
$height: $($width + 10px);

#header {
  width: $width;
  height: $height;
}

References vs expressions​

Inside an expression, plain identifiers are treated as normal values/keywords when possible.

$color: red;
value: $(red); // red (color keyword literal)
value: $($color); // red (variable reference inside Expression)
value: $less.iscolor($color); // true
$num: 10;
value: $($num + 1); // 11

Unwrapped arithmetic when a value leads with $var​

To cut down on the double-$, arithmetic in a value that leads with a $variable may skip the $(…) wrapper. $w + 1 is treated as $($w + 1):

width: $w + 1;    // same as $($w + 1)
width: $w * 2;    // multiply
width: $w * 2 + $h; // * binds tighter than +

Rules:

  • Only when the value starts with a $var — w + 1 (a keyword) stays literal text, and you still need $(w + 1) (or a $var) for arithmetic there.
  • The operator must be standalone (spaces on both sides). $w -1 is not subtraction — the -1 is a signed number, so it stays a two-item list. Write $w - 1 for subtraction.
  • / still requires the wrapper ($($w / 2)) — an unwrapped $w / 2 stays a slash-separated list (so font: 16px/1.5 keeps working).

Other operators​

? operator​

Jess uses ? to represent optionality. In many cases, that means that a variable that isn't found will not trigger an error, but will instead return a nil node.

border: 1px solid red;
color: $some-undefined-variable?; // nil
background: black;

→

border: 1px solid red;
background: black;

? with CSS-like functions​

Both Less and Sass allow "function fallbacks". In other words, function calls will look up a respective Less/Sass function, and if it doesn't exist, it will output the function as-is.

Jess supports this with a ? operator after the function name.

// If a variable exists named `rgb`, call the variable as a function, passing these values to the function. Otherwise, output the function as-is.
value: rgb?(10, 20, 30);

→

value: rgb(10, 20, 30);

Note that this is distinct from:

// If the variable `rgb` does not exist, resolve to `nil`.
value: $rgb?(10, 20, 30);

→ (no output)