Sass2JSON 0.1.0

Sass2JSON

Converts Sass variables to a corresponding JSON format.

Currently Supports

• Variables
• Maps
• Custom output object format

Output Format

The converter will take your isolated Sass variable file and convert it to a list of objects in the format below. This list will then be convertered into your final JSON data structure.

public class SassDocItem
{
    public string Class { get; set; }
    public string Variable { get; set; }
    public object Value { get; set; }
    public string SaSSType { get; set; }
}

Example

Provided is a basic example of sass variables and a sass map and the expected JSON output if run through the converter.

Sass Input

// @json-config-default AutoGenHelper=true

// Basic variable examples
$color-red: #DC3545
$color-orange: #FF9800
$color-yellow: #FFEB3B
$color-green: #28A745
$color-blue: #2D578F

// Map example
$other-color-map: ( white: $color-white, black: $color-black, light: $color-light, dark: $color-dark, success: $color-success, danger: $color-danger, warning: $color-warning, divider: $color-divider, link: $color-link );

JSON Output

[
    {
        "class": null,
        "variable": "$color-red",
        "value": "#DC3545",
        "sassType": "value"
    },
    {
        "class": null,
        "variable": "$color-orange",
        "value": "#FF9800",
        "sassType": "value"
    },
    {
        "class": null,
        "variable": "$color-yellow",
        "value": "#FFEB3B",
        "sassType": "value"
    },
    {
        "class": null,
        "variable": "$color-green",
        "value": "#28A745",
        "sassType": "value"
    },
    {
        "class": null,
        "variable": "$color-blue",
        "value": "#2D578F",
        "sassType": "value"
    },
    {
        "class": null,
        "variable": "$other-color-map",
        "value": [
            {
                "white": "$color-white"
            },
            {
                "black": "$color-black"
            },
            {
                "light": "$color-light"
            },
            {
                "dark": "$color-dark"
            },
            {
                "success": "$color-success"
            },
            {
                "danger": "$color-danger"
            },
            {
                "warning": "$color-warning"
            },
            {
                "divider": "$color-divider"
            },
            {
                "link": "$color-link"
            }
        ],
        "sassType": "list"
    }
]

``