js-to-scss

npm install js-to-scss -D

This is a simple module that will flatten down a javascript object into a string. You can inject that string inside your Sass engine, via the data option

Example:

import flattenObjSass from "js-to-scss";

const color= {
    black: '#000000',
    white: '#ffffff'
}
flattenObjSass(color);

will return:

$black: #000000;
$white: #ffffff;

Behavior

This module will convert arrays in Sass-list-like string and will go recursively down to your object.

Example:

const settings = {
  color: {
    primary: {
      light: "#2ecc71",
      normal: "#27ae60",
      dark: "#16a085"
    }
  },
  remSize: ["14px", "16px", "18px"]
};

$color-primary-light: #2ecc71;
$color-primary-normal: #27ae60;
$color-primary-dark: #16a085;
$remSize: (
  14px,
  16px,
  18px
);

Quoted and Unquoted values

You have to add an extra pair of quotes around any string values when you need them to be quoted strings in the resulting SCSS. js-to-scss does not add or remove any quotes, because there are valid use cases for both scenarios:

const settings = {
  color: "rgb(204, 102, 153)",
  font: "'Helvetica Neue'",
};

$color: rgb(204, 102, 153);
$font: 'Helvetica Neue';

Special Characters

SASS variable names can contain a wide range of ASCII and Unicode characters; even punctuation and parentheses are allowed as long as they are escaped with a preceding backslash. js-to-scss automatically escapes the following characters when found (unescaped) in property names: !"#$%&'()*+,./:;<=>?@[]^{|}~

const color = {
  primary: {
    light: "#2ecc71",
    normal: "#27ae60",
    dark: "#16a085",
    '30%': "#27ae604c",
    '60%': "#27ae6099",
  },
  icon: {
    '\\@': "#000000",
    '\\$': "#dddddd",
    '\\+': "#eeeeee",
  },
};

$primary-light: #2ecc71;
$primary-normal: #27ae60;
$primary-dark: #16a085;
$primary-30\%: #27ae604c;
$primary-60\%: #27ae6099;
$icon-\@: #000000;
$icon-\$: #dddddd;
$icon-\+: #eeeeee;

Options

flattenObjSass(
    obj,
    prefix = "$",
    transform = (prop, val) => val
)

• obj: The object that will be transformed
• prefix = String prepended to every "property", default is $ to mimic Sass variables
• transform: you can manipulate the value, the key is passed to check purposes.

Example:

flattenObjSass(
  {
    transform: 1,
    thatKey: 2,
    complex: {
      a: [1, 2, 3],
      b: "#fff"
    }
  },

  "$transform-",

  (key, val) => {
    if (typeof val === "number") {
      val = val * 100;
    }

    if (key === "thatKey") {
      val = val / 100;
    }

    if (Array.isArray(val)) {
      val = val.map(n => n * 100);
    }

    return val;
  }
);

    $transform-transform: 100;
    $transform-thatKey: 200;
    $transform-complex-a: (100,200,300);
    $transform-complex-b: #fff;

Why that?

I like to have a config file with all the design option configuration: color, breakpoints, typography etc... So I can use that across all the application (breakpoint are really useful in your template engine if you use Elements Queries)

Why not a Webpack loader / Gulp plugin / Whatelse?

I wanted something simple importable in every node based project I have around