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
import flattenObjSass from "js-to-scss";
const color= {
black: '#000000',
white: '#ffffff'
}
flattenObjSass(color);
will return:
$black: #000000;
$white: #ffffff;
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
);
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';
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;
flattenObjSass(
obj,
prefix = "$",
transform = (prop, val) => val
)
obj
: The object that will be transformedprefix
= String prepended to every "property", default is$
to mimic Sass variablestransform
: 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;
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)
I wanted something simple importable in every node based project I have around