Skip to main content

Migrating to Jess

Moving an existing Less or Sass codebase onto Jess? This guide pairs the jess convert first pass with a side-by-side mapping so you can see exactly what each construct becomes in Jess syntax.

note

jess convert is available today and is best used as a first-pass migration assistant. Plan on reviewing converted output and iterating on edge cases (especially complex mixin/namespace patterns) as Jess syntax continues to evolve in alpha.

Migrating Less to Jess​

jess convert "./src/less/**/*.less" "./src/styles"

Conversion steps​

Jess starts by parsing your Less/Sass source (or other plugin-provided language), then evaluates the tree so it can rewrite syntax with real context (imports, function calls, variable lookups). Think of it as "mechanical migration first, human polish second."

At-rules​

Jess will convert at-rules to their prefixed counterparts. In import rules, Jess will distinguish between file-relative and module-relative imports, as Jess requires file-relative imports to be explicit.

E.g. @import will become @-import

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

@-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, with { } configuration). A Sass @use "./theme"; maps most cleanly to @-compose "./theme";, not @-import. Convert with @-import for the first pass, then promote real modules to @-compose.

Variable declarations​

Less-style variable declarations will be converted to Jess-style variable declarations, which resemble Sass-style variable declarations.

@color: #06c;

Variable references​

Less-to-Jess​

value: @color;
value: $color;

Sass-to-Jess​

info

The $! live-binding sigil in Jess reads the latest (live) value of a variable rather than its value at that point in the scope. That matches how Sass variable lookups behave.

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 variable identifier interpolation (selector/property-name interpolation)
  • $['name'] for property lookup interpolation keys (e.g. Less ${name})

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);