drwpow
@cobalt-ui/plugin-sass
Generate .scss and .sass from your Design Tokens Community Group (DTCG) tokens.
Features
- ✅ Supports all features of the CSS plugin
- ✅ Strong typechecking with Sass to never have broken styles
Setup
Install the plugin (and its dependency) from npm:
npm i -D @cobalt-ui/plugin-sass @cobalt-ui/plugin-cssThen add to your tokens.config.mjs file:
// tokens.config.mjs
import pluginSass from "@cobalt-ui/plugin-sass";
/** @type {import("@cobalt-ui/core").Config} */
export default {
tokens: "./tokens.json",
outDir: "./tokens/",
plugins: [pluginSass()],
};And run:
npx co buildYou’ll then generate a ./tokens/index.scss file that exports a token() function you can use to grab tokens:
@use "../tokens" as *; // update "../tokens" to match your location of tokens/index.scss
.heading {
color: token("color.blue");
font-size: token("typography.size.xxl");
}