Variables

Jess has two explicit variable-reference modes.

Reference	Meaning
$foo	Live reference: read the value currently bound for foo at evaluation time.
$$foo	Scoped/final lookup.

Choosing a reference

Use $foo when the value should be live at the point the expression evaluates. Use $$foo when you need the scoped/final lookup behavior.

.card {
  color: $theme;    // live reference
  border: $$theme;  // scoped/final lookup
}

Variables are not expression names

$color reads the variable named color. $(color) does not; inside an expression, color is an ordinary value token. To use a variable inside an expression, keep the variable reference explicit:

$color: red;

.card {
  a: $color;     // variable lookup -> red
  b: $(color);   // value token -> color
  c: $($color);  // expression containing a variable lookup -> red
}

Declarations and assignments

Both $foo: value and $$foo: value create or update both the live and scoped bindings. The sigil changes lookup behavior, not the kind of binding created.

Form	Lookup used by the operation
$foo?: value	Test the live map; create/update both bindings if absent.
$$foo?: value	Test the scoped/final map; create/update both bindings if absent.
$foo := value	Update the live/current binding.
$$foo := value	Update the scoped/final binding.

$theme: blue;       // creates both bindings (`$$theme: blue` does too)
.card {
  color: $theme;    // live reference
  border: $$theme;  // scoped/final lookup
}

SCSS retains its own $name: value, !default, and !global syntax at the input boundary; see Sass (SCSS) compatibility.

Block-valued assignments

Normally, adjacent declarations need semicolon separators. Block-valued assignments are the exception: a variable can be bound to a collection, an anonymous mixin, or a function, and that assignment ends at the block's closing brace. The trailing ; is optional even when another declaration follows:

$colors: {
  primary: #06c;
}
$mixin: @{
  color: red;
}
$double: @($n) > {
  result: $($n * 2);
}

All three are also valid written with a ; after the closing brace. Write whichever you prefer, but you never need one.

Block values stand on their own as the assigned value. To combine data from a block with other values, bind the block first and compose from the binding:

$shadow: {
  blur: 4px;
}
$rule: 0 0 $shadow.blur #000;

.box {
  box-shadow: $rule;
}

→

.box {
  box-shadow: 0 0 4px #000;
}

The same rule applies to collections, anonymous mixins, and function literals.