@cobalt-ui/plugin-sass v1.8.0
@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
3 months ago
4 months ago
9 months ago
6 months ago
9 months ago
7 months ago
10 months ago
7 months ago
8 months ago
11 months ago
12 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago