Package Exports

@cobalt-ui/plugin-sass
@cobalt-ui/plugin-sass/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@cobalt-ui/plugin-sass) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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-css

Then 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 build

You’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");
}

Docs

View the full documentation