Mixin Dictionary

Mixin Dictionary is a package based on Style Dictionary that allows creating mixins from design tokens for LESS and SCSS.

Installation

$ npm install mixin-dictionary --save-dev
# or
$ yarn add mixin-dictionary --dev

Usage

$ mixin-dictionary

CSS

At the moment, CSS does not yet have the ability to use mixins.

Example

As an example of usage, you can look at the pbstyles style library.

config.json

{
  "platforms": ["css", "less", "scss"],
  "source": ["tokens/**/*.json"],
  "output": "./styles",
  "mediaAliases": ["screen", "breakpoint"]
}

Example of a mixin

{
  "font": {
    "h64": {
      "font-size": {
        "value": "64px",
        "mixin": "h64"
      },
      "line-height": {
        "value": "1.25",
        "mixin": "h64"
      },
      "font-weight": {
        "value": "700",
        "mixin": "h64"
      }
    }
  }
}

SCSS

$font-h64-font-size: 64px;
$font-h64-line-height: 1.25;
$font-h64-font-weight: 700;

@mixin h64 {
  font-size: $font-h64-font-size;
  line-height: $font-h64-line-height;
  font-weight: $font-h64-font-weight;
}

LESS

@font-h64-font-size: 64px;
@font-h64-line-height: 1.25;
@font-h64-font-weight: 700;

.h64() {
  font-size: @font-h64-font-size;
  line-height: @font-h64-line-height;
  font-weight: @font-h64-font-weight;
}

Example of a media query mixin

{
  "screen": {
    "lg": {
      "max": {
        "value": "1440px",
        "mixin": "lg"
      },
      "min": {
        "value": "921px",
        "mixin": "lg"
      }
    }
  }
}

SCSS

$screen-lg-max: 1440px;
$screen-lg-min: 921px;

@mixin lg {
  @media all and (max-width: $screen-lg-max) and (min-width: $screen-lg-min) {
    @content;
  }
}

LESS

@screen-lg-max: 1440px;
@screen-lg-min: 921px;

.lg(@content) {
  @media all and (max-width: @screen-lg-max) and (min-width: @screen-lg-min) {
    @content;
  }
}