https://github.com/prosazhin/mixin-dictionary
Creating mixins from design tokens for LESS and SCSS.
https://github.com/prosazhin/mixin-dictionary
build-system build-tool css design design-system design-tokens design-tool dictionary less mixin scss style system tokens tool
Last synced: 4 months ago
JSON representation
Creating mixins from design tokens for LESS and SCSS.
- Host: GitHub
- URL: https://github.com/prosazhin/mixin-dictionary
- Owner: prosazhin
- License: mit
- Created: 2023-11-04T12:52:19.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-02-26T20:35:36.000Z (4 months ago)
- Last Synced: 2026-02-27T01:59:16.279Z (4 months ago)
- Topics: build-system, build-tool, css, design, design-system, design-tokens, design-tool, dictionary, less, mixin, scss, style, system, tokens, tool
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/mixin-dictionary
- Size: 222 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Mixin Dictionary
Mixin Dictionary is a package based on [Style Dictionary](https://github.com/amzn/style-dictionary) that allows creating mixins from design tokens for LESS and SCSS.
## Installation
```bash
$ npm install mixin-dictionary --save-dev
# or
$ yarn add mixin-dictionary --dev
```
## Usage
```bash
$ mixin-dictionary
```
| Flag | Short Flag | Description |
| ----------------- | ---------- | ------------------------------------------------ |
| --config \[path\] | -c | Set the config file to use. Must be a .json file |
## 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](https://github.com/prosazhin/pbstyles) style library.
### config.json
```json
{
"platforms": ["css", "less", "scss"],
"source": ["tokens/**/*.json"],
"output": "./styles",
"mediaAliases": ["screen", "breakpoint"],
"keyframesAliases": ["keyframes"]
}
```
| Property | Type | Description |
| :--------------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| platforms | Array | Sets of platform files to be built. By default is "[\"css\", \"less\", \"scss\"]". |
| source | Array | An array of file path [globs](https://github.com/isaacs/node-glob) to design token files. Exactly like [Style Dictionary](https://github.com/amzn/style-dictionary). |
| output | String | Base path to build the files, must end with a trailing slash. By default is "./styles". |
| mediaAliases | Array | Aliases for media queries category. By default is "[\"screen\", \"breakpoint\"]". |
| keyframesAliases | Array | Aliases for keyframes animations category. By default is "[\"keyframes\"]". |
### Example of a mixin
```json
{
"font": {
"h64": {
"font-size": {
"value": "64px",
"mixin": "h64"
},
"line-height": {
"value": "1.25",
"mixin": "h64"
},
"font-weight": {
"value": "700",
"mixin": "h64"
}
}
}
}
```
#### SCSS
```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
```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 keyframes mixin
```json
{
"keyframes": {
"fade": {
"from": {
"value": "opacity: 0;",
"mixin": "fade"
},
"to": {
"value": "opacity: 1;",
"mixin": "fade"
}
}
}
}
```
#### SCSS
```scss
$keyframes-fade-from: opacity: 0;
$keyframes-fade-to: opacity: 1;
@mixin fade {
@include keyframes(fade) {
from { #{$keyframes-fade-from} }
to { #{$keyframes-fade-to} }
}
}
```
#### LESS
```less
@keyframes-fade-from: opacity: 0;
@keyframes-fade-to: opacity: 1;
.fade() {
.keyframes(fade, {
from { @keyframes-fade-from; }
to { @keyframes-fade-to; }
});
}
```
### Example of a media query mixin
```json
{
"screen": {
"lg": {
"max": {
"value": "1440px",
"mixin": "lg"
},
"min": {
"value": "921px",
"mixin": "lg"
}
}
}
}
```
#### SCSS
```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
```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;
}
}
```