Utopia SCSS library

To assist developers using SCSS & Utopia, we’ve published utopia-core-scss. This library includes functions & mixins to calculate and generate Utopian type & space scales directly in SCSS.

Installation

1. Install the package through npm

npm install utopia-core-scss

2. Next, import the package into your SCSS file. The plugin won’t generate any code unless called. Use @use to namespace the functions and mixins.

@use 'node_modules/utopia-core-scss/src/utopia' as utopia;

3. Finally, call the functions and mixins with the same values you know and love from utopia.fyi.

:root {
  @include utopia.generateTypeScale((
    "minWidth": 320,
    "maxWidth": 1240,
    "minFontSize": 18,
    "maxFontSize": 20,
    "minTypeScale": 1.2,
    "maxTypeScale": 1.25,
    "positiveSteps": 5,
    "negativeSteps": 2,
  ));

  $customClampValue: utopia.calculateClamp((
    "minWidth": 320,
    "maxWidth": 1240,
    "minSize": 16,
    "maxSize": 20,
  ));
}

Mixins

There are four mixins:

• generateTypeScale - Create a Utopian type scale
• generateSpaceScale - Generate space units, one-up pairs and custom pairs
• generateClamps - Generate multiple clamps between two widths using pairs of min/max sizes
• generateClamp - Generate a single clamp between two widths from a min and max size

The prefix for the custom properties can be altered, but defaults to step- for typography, and space- for space units. Space mixins can also supply usePx: true if you wish to disconnect space from browser text zoom preferences.

All mixins can be relativeTo:

• container (cqi)
• viewport-width (vw)
• viewport (vi) ← this is the default.

Full documentation can be viewed on GitHub.

Functions

The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements.

• calculateTypeScale - returns a list of maps with step, minFontSize, maxFontSize and clamp
• calculateSpaceScale - returns a map with sizes, oneUpPairs and customPairs lists
• calculateClamps - returns a list of maps with label & clamp
• calculateClamp - returns a clamp string

Full documentation can be viewed on GitHub.