node-sass-functions-json

JSON encode and decode functions for node-sass.

Install

npm install node-sass-functions-json --save

Usage

const sass = require('node-sass');
const jsonFunctions = require('node-sass-functions-json');
 
sass.render({
    file: './index.scss',
    functions: Object.assign({}, jsonFunctions)
}, function (error, result) {
    // ...
});

Module exports object with prepared functions json-encode and json-decode. If you need functions as separate entities, they are available as static properties encode and 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)

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.*

Data to encode (stringify).

quotes

Type: Boolean|sass.types.Boolean
Default: true

Should output string be quoted with single quotes.

json-decode(data)

Returns: sass.types.*

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|sass.types.Number|sass.types.Boolean|sass.types.Null

String to decode (parse).

Related

• node-sass-json-functions - Thanks for inspiration.

Contribution

Feel free to push your code if you agree with publishing under the MIT license.

Changelog

License