yaml-to-scss

yaml-to-scss is a simple command-line tool to convert YAML files into SCSS files containing variables that are named based on the structure of the YAML file.

 

Contents

• Installation
• Usage
• Examples
  • Basic Conversion
  • Converting Nested YAML
  • Converting Quoted Keys
  • Converting Lists
• License

 

Installation

You can install yaml-to-scss via npm.

Install globally

npm i -g yaml-to-scss

Install as a dev-dependency

npm i -D yaml-to-scss

 

Usage

To convert a YAML file to a SCSS file, use the following command:

yaml-to-scss <src> <dest>

Replace <src> with the path to a YAML file and <dest> with the desired path for the resulting SCSS file.

 

If you didn't install yaml-to-scss globally or as a dev-dependency, you can use the following command:

npx yaml-to-scss <src> <dest>

 

The tool follows a simple convention for naming variables in SCSS:

• Top-level keys in the YAML file become the basenames of the SCSS variables.
• Nested keys are concatenated to the basename with a hyphen -.
• Listed items get a number (starting from 0) concatenated to the basename with a hyphen -.
• If the YAML key contains single or double quotes, they get converted to the SCSS file without changes.

You can find examples here!

Please also keep in mind that

• The tool converts only one YAML file at a time.
• Each conversion overwrites the contents of the SCSS file, erasing any previous content.

 

Examples

Basic Conversion

Consider you have a .yaml file with the following content:

primary: blue
secondary: gray
danger: red
success: green

Running yaml-to-sass on this YAML file will create a .scss file with the following content:

$primary: blue;
$secondary: gray;
$danger: red;
$success: green;

 

Converting Nested YAML

Consider you have a .yaml file with the following content:

theme:
  colors:
    primary: blue
    secondary: red
    background:
      default: white
      alternate: gray

Running yaml-to-sass on this YAML file will create a variables.scss file with the following content:

$theme-colors-primary: blue;
$theme-colors-secondary: red;
$theme-colors-background-default: white;
$theme-colors-background-alternate: gray

 

Converting Quoted Keys

Consider you have a .yaml file with the following content:

font-stacks:
  sans-serif: "Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', Times, 'Times New Roman', serif"
  serif: "Constantia, 'Lucida Bright', Lucidabright, 'Lucida Serif', Lucida, 'Liberation Serif', Georgia, serif"
  monospace: "Consolas, 'Andale Mono WT', 'Andale Mono', 'DejaVu Sans Mono',  Monaco, 'Courier New', Courier, monospace"

Running yaml-to-sass on this YAML file will create a .scss file with the following content:

$font-stacks-sans-serif: "Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', Times, 'Times New Roman', serif"
$font-stacks-serif: "Constantia, 'Lucida Bright', Lucidabright, 'Lucida Serif', Lucida, 'Liberation Serif', Georgia, serif"
$font-stacks-monospace: "Consolas, 'Andale Mono WT', 'Andale Mono', 'DejaVu Sans Mono',  Monaco, 'Courier New', Courier, monospace"

 

Converting Lists

Consider you have a list.yaml file with the following content:

list:
  - item: value1
  - item: value2
  - item: value3

Running yaml-to-sass on this YAML file will create a .scss file with the following content:

$list-0-item: value1;
$list-1-item: value2;
$list-2-item: value3;

 

License

This project is licensed under the MIT license.