@toife/sass-layer-generator

Sass library for design tokens, utility classes, and theme generation. No build step required — use raw Sass files directly in your project.

Installation

npm install @toife/sass-layer-generator
# or
yarn add @toife/sass-layer-generator
# or
pnpm add @toife/sass-layer-generator

Usage

Basic import

@use "@toife/sass-layer-generator" with (
  $prefix: "t",
  $separator: "-"
);

Use config, functions, mixins, generators

@use "@toife/sass-layer-generator" as sass-layer;

// Config (prefix, separator)
// Functions: fn-naming-*, fn-color-*
// Mixins: mx-palette, mx-tokens
// Generators: classes-generate, properties-generate

Example: Generate utility classes

@use "@toife/sass-layer-generator" as sass-layer;

@include sass-layer.classes-generate();

Example: Generate theme from tokens

@use "@toife/sass-layer-generator" as sass-layer;

$theme: (
  "spacing": (...),
  "layers": (...),
  "shapes": (...),
  "sizes": (...),
  "palette": (...)
);

@include sass-layer.properties-generate("light", $theme);

API

| Namespace | Description | |-----------|-------------| | config | $prefix, $separator variables | | fn-naming-* | Naming functions (prefix, property, var...) | | fn-color-* | Color utilities (palette, mix, tint, shade...) | | mx-* | Mixins (palette, tokens) | | classes-* | Utility class generators (spacing, flex, display...) | | properties-* | Theme/token generators (layers, shapes, tokens) |

Peer dependency

• sass >= 1.50.0