sasssass-maps

Sass map dynamic keys


Is it possible to use variables as keys to define a map?

Example code

$types: (
        'INPUT': 1,
        'SELECT': 2,
        'BUTTON': 3,
);

$colors: (
        $types['INPUT'] : #f44336,
        $types['SELECT']: #2196f3,
        $types['BUTTON']: #9c27b0,
);

Solution

  • I found out how to do it

    @function type($key) {
      @return map-get($types, $key);
    }
    
    $colors: (
            type('INPUT'): #f44336,
            type('SELECT'): #2196f3,
            type('BUTTON'): #9c27b0,
    }