Variables

In Jess, you can declare variables using the @let at-rule.

@let myColor: #ABC;

Note: variables at the root of the document are automatically exported (with export let).

Variables are referenced using the $ symbol.

.box {
  color: $myColor;  // or $(myColor)
}

You can create a collection/map like this:

@let theme {
  colors {
    primary: blue;
    secondary: green;
  }
  other: value;
}

This can be referenced like a JS object (which it is), like this:

.box {
  color: $theme.colors.primary;
}

Theming#

Variables in Jess stylesheets are default values. Meaning that you can pass in new values to a stylesheet when @include-ing that stylesheet.

Say I have this stylesheet:

// library.jess
@let colors {
  primary: blue;
}

.box {
  color: $colors.primary;
}

I can change the way it evaluates with the following:

@import library from './library.jess';

@let overrides {
  colors {
    primary: rebeccapurple;
  }
}

@include library($overrides);

This will produce the following:

.box {
  color: rebeccapurple;
}