README
scss-variable
Generate css variables fro different css pre-processors. Mainly target for scss/sass.
Installation
npm i -D scss-variable
#or
yarn add -D scss-variable
Usage
Assume you have a varaible.js
looks like this
module.exports = {
ns: {
property: {
a: "#fff",
b: "#ccc"
}
}
};
Create another scss-variable.js
const path = require("path");
const generateVariable = require("scss-variable");
generateVariable({
src: path.resolve(__dirname, "path/to/variable.js"),
dest: path.resolve(__dirname, "path/to/variable.scss")
});
Then run node scss-variable
;
Output will look like this
// variable.scss
$ns-property-a: #fff;
$ns-property-b: #ccc;
Advanced usage
Scss map
// in your variable.js
module.exports = {
_map_: {
ns: {
case: {
"font-size": "12px"
}
}
}
};
Run node scss-variable
Output will look like this
$ns: (
case: (
font-size: 12px
)
);
To use !default
module.exports = {
_map_: {
ns: {
default: true,
case: {
"font-size": "12px"
}
}
}
};
Output will look like this
$ns: (
case: (
font-size: 12px
)
) !default;
map will be emitted after variables
You can refer to your variables in your map
Merge
override
is used to provide a new object to merge with src
const path = require("path");
const generateVariable = require("scss-variable");
generateVariable({
src: path.resolve(__dirname, "path/to/variable.js"),
dest: path.resolve(__dirname, "path/to/variable.scss"),
override: {
property: "value"
}
});
You can merge variables as well as scss map
// in variable.js
module.exports = {
a: {
p: "black"
},
_map_: {
ns: {
case: {
"font-size": "12px"
}
}
}
};
// in your external override related js
module.exports = {
a: {
p: "red"
},
_map_: {
ns: {
case: {
"font-size": "14px"
}
}
}
};
// in scss-variable.js
generateVariable({
src: path.resolve(__dirname, "path/to/variable.js"),
dest: path.resolve(__dirname, "path/to/variable.scss"),
override: require("path/to/override/related/js")
});
Output will be:
$a-p: red;
$ns: (
case: (
font-size: 12px
)
);
Viola!
In case you do not like nesting, flatten property key or even flatten map expression are supported
The case above can be rewritten as following
// in your external override related js
module.exports = {
"a-p": "red",
"ns.case": {
"font-size": "14px"
}
};
Configuration
src
Source of your variable
dest
Where to emit your file. File extension is needed!
In other word,
less
or other syntax are possible and actually supported
[override]
Object to override your src
[prefix]
Default: '