README
node-sass-json-functions
JSON encode and decode functions for sass.
Install
npm install sass node-sass-json-functions --save
Usage
import sass from 'sass';
import jsonFns from 'node-sass-json-functions';
sass.render(
{
file: './index.scss',
functions: { ...jsonFns }
},
(err, res) => {
// ...
}
);
Module exports object with prepared functions json-encode
and json-decode
.
Encode
Input:
$list: 1, 2, '3', (4, 5, 6), (
foo: 'bar baz'
);
$map: (
foo: 1,
bar: (
2,
3
),
baz: '3 3 3',
bad: (
foo: 11,
bar: 22,
baz: (
5,
4,
6,
null,
1,
1.23456789px
),
bag: 'foo bar'
),
qux: rgba(255, 255, 255, 0.5),
corgle: red
);
body {
content: json-encode($list);
content: json-encode($map);
content: json-encode($list, $quotes: false);
content: json-encode($map, $quotes: false);
}
Output:
body {
content: '[1,2,"3",[4,5,6],{"foo":"bar baz"}]';
content: '{"foo":1,"bar":[2,3],"baz":"3 3 3","bad":{"foo":11,"bar":22,"baz":[5,4,6,null,1,"1.23457px"],"bag":"foo bar"},"qux":"rgba(255,255,255,0.5)","corgle":"#f00"}';
content: [1,2,"3",[4,5,6],{"foo":"bar baz"}];
content: {"foo":1,"bar":[2,3],"baz":"3 3 3","bad":{"foo":11,"bar":22,"baz":[5,4,6,null,1,"1.23457px"],"bag":"foo bar"},"qux":"rgba(255,255,255,0.5)","corgle":"#f00"};
}
Decode
Input:
$array: '[1,2,"3",[4,5,6],{"foo":"bar baz"}]';
$object: '{"foo":1,"bar":[2,3],"baz":"3 3 3","bad":{"foo":11,"bar":22,"baz":[5,4,6,null,1,"1.23456789px"],"bag":"foo bar"},"qux":"rgba(255,255,255,0.5)","corgle":"#f00"}';
@debug json-decode($array);
@debug json-decode($object);
Output:
DEBUG: 1, 2, 3, 4, 5, 6, (foo: bar baz)
DEBUG: (foo: 1, bar: 2, 3, baz: 3 3 3, bad: (foo: 11, bar: 22, baz: 5, 4, 6, null, 1, 1.23456789px, bag: foo bar), qux: rgba(255, 255, 255, 0.5), corgle: red)
API
json-encode(data[, quotes, precision])
Returns: sass.types.String
Encodes (JSON.stringify
) data and returns Sass string. By
default, string is quoted with single quotes so that it can be easily used in
standard CSS values.
- Sass lists are transformed to arrays
- Sass maps are transformed to objects
- Sass colors are transformed to
rgba()
syntax if they have alpha value, otherwise they are transformed to hex value (and it’s shorther version if possible) - Sass strings are transformed to strings
- Sass numbers are transformed to numbers
- Sass null values and anything unresolved is transformed to null values
data
Type:
sass.types.Null|sass.types.Number|sass.types.String|sass.types.Boolean|sass.types.Color|sass.types.List|sass.types.Map
Data to encode (stringify).
quotes
Type: sass.types.Boolean
Default: true
Should output string be quoted with single quotes.
precision
Type: sass.types.Number
Default: 5
Number of digits after the decimal.
json-decode(data)
Returns:
sass.types.Null|sass.types.Number|sass.types.String|sass.types.Boolean|sass.types.Color|sass.types.List|sass.types.Map
Decodes (JSON.parse
) string and returns one of available Sass
types.
- Arrays are transformed to Sass lists
- Objects are transformed to Sass maps
- Anything properly parsed with parse-color is transformed to Sass color
- Strings are transformed to Sass numbers with units if they can be properly parsed with parse-css-dimension, otherwise they are transformed to Sass strings
- Numbers are transformed to Sass numbers
- Null values and anything unresolved is transformed to Sass null values
data
Type: sass.types.String
String to decode (parse).
License
MIT © Ivan Nikolić