Oombla DocsMenuoombla.com

Sass

Export design tokens for Sass

Documentation for the Sass platform is a work in progress.

Gotchas

With Sass, variable names can not start with numbers. Sass will throw an error when processing a variable if it begins with 0-9. For this reason, when processing tokens for Sass, if the plugin encounters a variable name that begins with a number it will add a single letter before the variable name that corresponds to the token category.

So if you have a spacing token named 1, when it's exported for Sass the token name will be changed to s1. The plugin does NOT change anything in your Figma file, just for the exported token names.

The token category abbreviations are:

  • color = c
  • spacing = s
  • typography = t

Note that there are other restrictions when naming variables for Sass, but the plugin only applies a fix for the number issue described above.

Sample repository

Go to the Sass platform sample repository to view a working demo of the design tokens exported for the Sass platform.