Skip to main content

Migrating to Jess

Moving an existing Less or Sass codebase onto Jess? This guide is a side-by-side mapping so you can see exactly what each construct becomes in Jess syntax.

Migration is manual today

There is no jess convert command. An automated .less/.scss → .jess converter is planned but not implemented. The jess CLI compiles a single file to CSS by default (jess input.less -o dist) and exposes jess lint as a separate diagnostics workflow.

You do not have to migrate to use Jess: the compiler reads .less and .scss sources directly. Port files to .jess by hand, using the mappings below, only where you want the native syntax.

Construct mapping​

Each section pairs a source construct with the Jess spelling it becomes. These are the same mappings an automated converter would apply, so they are equally useful as a hand-migration checklist and as the specification for that future tool.

At-rules​

At-rules become their prefixed counterparts. Import rules also have to distinguish file-relative from module-relative paths, because Jess requires file-relative imports to be explicit.

E.g. @import becomes @-import

@import "variables"; // variables.less
Prefer @-compose once ported

@-import is a legacy bridge — it works and eases a mechanical port, but it emits a deprecation warning because it re-exports everything and changes the evaluation context per call. The Jess module system is @-compose (namespaced, isolated scope). A Sass @use "./theme"; maps most cleanly to @-compose "./theme";, not @-import. Use @-import for the first pass, then promote real modules to @-compose.

@-compose currently accepts a quoted path and an optional as alias (@-compose "./theme" as t;). Sass's @use ... with (...) configuration has no @-compose equivalent yet.

Variable declarations​

Both Jess $name: value and $$name: value create or update both live and scoped bindings. The reference sigil, rather than the declaration, selects lookup behavior.

@color: #06c;

Variable references​

Less-to-Jess​

value: @color;
value: $$color;

Sass-to-Jess​

info

Jess $color is the live/current reference form. $$color is the scoped/final lookup.

value: $color;
value: $color;

Expressions​

Jess expressions are always $(...). Plain $var is a variable reference. Inside an expression, variables keep their $ sigil — a bare identifier is a keyword, not a variable.

Use:

  • $var for a direct variable reference
  • $($var) when you need that reference inside an expression
  • ${ident} for interpolation in selector, property-name, and string positions — this is Jess's counterpart to Less's @{name}, and it is spelled the same way
  • $['name'] for a property lookup key (a lookup, in value position)

Less-to-Jess​

value: @width + 1;
value: (@width / 2);
value: $($$width + 1);
value: $($$width / 2);

Sass-to-Jess​

value: $width + 1;
value: ($width / 2);
value: $($width + 1);
value: $($width / 2);

Mixin definitions​

Less-to-Jess​

.box() {}
.with-params(
  @param1: 1;
  @param2: 2;
) {}
.box() {}
.with-params(
  $param1: 1,
  $param2: 2
) {}

Sass-to-Jess​

@mixin box() {}
@mixin with-params(
  $param1: 1,
  $param2: 2
) {}
box() {}
with-params(
  $param1: 1,
  $param2: 2
) {}

Mixin calls​

Less-to-Jess​

.box();
.with-params(1; 2);
$ > .box();
$ > .with-params(1, 2);

Sass-to-Jess​

@include box();
@include with-params(1, 2);
$ > box();
$ > with-params(1, 2);