node-sass-json-functions

JSON encode and decode functions for sass.

Install

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

Usage

import * as sass from 'sass';
import jsonFns from 'node-sass-json-functions';

(async () => {
    const result = await sass.compileAsync('./index.scss', {
        functions: { ...jsonFns }
    });
    // ...
})();

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,
    george: calc(42px + 42%),
    lexi: calc(42px / 2),
    oliver: calc(42px + 10px + 10px)
);

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","george":"calc(42px + 42%)","lexi":"21px","oliver":"62px"};
}

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","george":"calc(42px + 42%)","lexi":"21px","oliver":"calc(42px + 10px + 10px)"}';

@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, george: calc(42px + 42%), lexi: 21px, oliver: "calc(42px + 10px + 10px)")

API

json-encode(data[, quotes])

Returns: sass.SassString

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 calculations are transformed to values corresponding to calculation result (string or number)
Sass strings are transformed to strings
Sass numbers are transformed to numbers
Sass booleans are transformed to booleans
Sass null values and anything unresolved is transformed to null values

data

Type: sass.Value

Data to encode (stringify).

quotes

Type: sass.SassBoolean
Default: sass.sassTrue

Should output string be quoted with single quotes.

json-decode(string)

Returns: sass.Value

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
Calculations (calc() values) are transformed to Sass calculations for simple operations and to Sass strings for everything else
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
Booleans are transformed to Sass booleans
Null values and anything unresolved is transformed to Sass null values

string

Type: sass.SassString

String to decode (parse).

パッケージの詳細