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
  • NPM
• Usage
  • In Sass side
    • List to array
    • Map to object
  • In JS side
• Contribute

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

^ Back to top