Property trees - Feuerfuchs/sass-ignis GitHub Wiki

Property trees are basically global nested maps that are immutable as long as you just use the intended functions.

It's a very simple feature, but it makes managing large sets of structured data much easier.

Configuration

Variable	Description	Default value
$ig-props-default-tree	Default tree name to use if no name is specified.	'default'

Usage

	Type	Description
ig-props-save($map, $tree: $ig-props-default-tree)	Function, Mixin	Save a new property tree.
ig-props-delete($tree: $ig-props-default-tree)	Function, Mixin	Delete a property tree.
ig-props-get-all($tree: $ig-props-default-tree)	Function	Get an entire property tree.
ig-props-get($key, $tree: $ig-props-default-tree, $default: null)	Function	Read a value from a property tree.

Example

@include ig-props-save((
    --accent:      #f00,
    --accent-text: #fff,

    --background:     #fff,
    --text:           #222,
    
    --link: (
        --idle: (
            --text:      #000,
            --underline: #f00
        ),
        --hover: (
            --text:      #f00,
            --underline: #f00
        )
    )
), 'light');

// Usage:

p {
    color:            ig-props-get(--text, 'light');       // #222
    background-color: ig-props-get(--background, 'light'); // #fff
}

a {
    color:            ig-props-get(--link --idle --text, 'light');                // #000
    border-bottom:    1px solid ig-props-get(--link --idle --underline, 'light'); // #f00
    text-decoration:  none;

    &:hover {
        color:               ig-props-get(--link --hover --text, 'light');      // #f00
        border-bottom-color: ig-props-get(--link --hover --underline, 'light'); // #f00
    }
}