⛋ @terrazzo/plugin-sass

Convert DTCG tokens into Sass for use in any web application or native app with webview. Uses the CSS plugin under the hood that lets you use all of CSS’ features with the typesafety of Sass.

Setup

Requires Node.js 18 or later and the CLI installed. With both installed, run:

npm i -D @terrazzo/plugin-css @terrazzo/plugin-sass

Add a terrazzo.config.js to the root of your project:

import { defineConfig } from "@terrazzo/cli";
import css from "@terrazzo/plugin-css";
import sass from "@terrazzo/plugin-sass";

export default defineConfig({
  outDir: "./tokens/",
  plugins: [
    css({
      fileName: "tokens.css",
    }),
    sass({
      fileName: "index.sass",
    }),
  ],
});

Lastly, run:

npx tz build

And you’ll see a ./tokens/index.scss file generated in your project.

Full Documentation