README
sass3js
Convert SASS * variables to JavaScript (flow supported), JSON, and TypeScript.
It takes this:
$red: #ff0001;
$dark-red: darken($red, 20%);
$spacing-1: 5px;
$spacing-2: $spacing-1 * 2;
and outputs this:
export default {
red: "#ff0001",
darkRed: "#990001",
spacing1: "5px",
spacing2: "10px",
};
so you can do stuff like this:
import variables from "styles/variables";
function Logo() {
return <Icon src={logo} fill={variables.darkRed} />;
}
* Only SCSS syntax is supported at the moment.
Getting started
Globally
You can install sass3js
globally with npm:
$ npm install -g sass3js sass
and use it like this:
$ sass3js variables.scss variables.js
In your project
You can also add sass3js
as a dev dependency to your own module:
$ npm i -D sass3js
Optionally, you can add a script to your package.json
file. Example:
"scripts": {
"update-vars": "sass3js -f ts styles/variables.scss styles/variables.ts"
}
Note: sass3js requires you to have sass installed
CLI
The CLI can take a source and a destination file:
$ sass3js source.scss destination.js
If those aren't provided, stdin and stdout are used instead:
$ cat source.scss | sass3js > destination.js
Options
-f, --format <format>
Output format. Takes: js
, json
, ts
, or flow
. Default: js
.
-t, --tab <tab>
Number of spaces or string to use for indentation. Default: 2
.
Using 4 spaces:
$ sass3js -t 4 source.scss
Using tabs instead of spaces:
$ sass3js -t