Skip to content

Converts js objects, like configuration ones, in scss variables, ready to be injected inside your Sass engine via the data option

Notifications You must be signed in to change notification settings

MakhBeth/js-to-scss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Converts js objects, like configuration ones, in scss variables, ready to be injected inside your Sass engine via the data option

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published