Sass2JS
A Sass & JS library that converts Sass list & map to JS array & object.
If youβre new to Sass, checkout π the official website of Sass
Why I need to convert Sass list & map into JS array & object?
Firstly, let me introduce π Interoperable CSS (ICSS) to you.
In ICSS, one of the section within about π :export show us the way to export Sass variables to JS, but unfortunately, you are not able to export sass map to JS which will case error. And this is the reason why this package exists.
Through this package, you will be able to convert Sass list & map into stringified JS array & object and enjoy the variables in JS.
Table of content:
Installation
Yarn
$ yarn add @gtomato-web/sass2js
NPM
$ npm i --save @gtomato-web/sass2js
Usage
With Sass modules and π @use, recommended.
In Sass side
List to array
To convert list to stringified array
// export.module.scss
@use '~@gtomato-web/sass2js' as s2j;
:export {
foo : s2j.list-to-stringified-array((1, foo, #000000, (2, 3, 4, 5, 6), 7 8 9 10 11, (a: 1, b: 2, c: 3, d: 4, e: 5), true, false, null));
}
// output
// '[1, "foo", "#000000", [2, 3, 4, 5, 6], [7, 8, 9, 10, 11], {a: 1, b: 2, c: 3, d: 4, e: 5}, true, false, null]'
Map to object
To convert map to stringified object
// export.module.scss
@use '~@gtomato-web/sass2js' as s2j;
:export {
bar : s2j.map-to-stringified-object((
a: 1,
b: foo,
c: #000000,
d: (2, 3, 4, 5, 6),
e: 7 8 9 10 11,
f: (a: 1, b: 2, c: 3, d: 4, e: 5),
g: true,
h: false,
i: null
));
}
// output
// '{a: 1, b: "foo", c: "#000000", d: [2, 3, 4, 5, 6], e: [7, 8, 9, 10, 11], f: {a: 1, b: 2, c: 3, d: 4, e: 5}, g: true, h: false, i: null}'
In JS side
// Any JS file(s) needed the variables
import variables from "export.module";
import {
parseStringifiedArray,
parseStringifiedObject,
} from "@gtomato-web/sass2js/core";
const parsedArray = parseStringifiedArray(variables.foo);
const parsedObject = parseStringifiedObject(variables.bar);
Contribute
If you want to contribute, please read CONTRIBUTING for more information
Sass to JS
functions
list-to-stringified-array
@function list-to-stringified-array($list) { ... }
Description
Parse Sass list to JS array
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$list | The list to parse | List | — none |
Returns
String
—Stringified array
Example
s2j.list-to-stringified-array((1, 2, 3, 4, 5));
map-to-stringified-object
@function map-to-stringified-object($map) { ... }
Description
Parse Sass map to JS object
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | The map to parse | Map | — none |
Returns
String
—Stringified map
Example
s2j.map-to-stringified-object((
a: 1,
b: a,
c: #000000,
d: (1, 2, 3, 4, 5),
e: 1 2 3 4 5,
f: (a: 1, b: 2, c: 3, d: 4, e: 5),
g: true,
h: false
i: null
));