loopssasssass-maps

Loop through nested SASS Maps to create classes


I try to loop through nested sass maps to create button classes. is this possible?

my maps are nested like this:

$buttons: (
	primary: (
		border: 1px solid #ccc,
		border-hover: 1px solid #ccc,
		color: red,
		color-hover: blue
	),
	secondary: (
		border: 1px solid #ccc,
		border-hover: 1px solid #ccc,
		color: red,
		color-hover: blue
	)
);

When i try to loop through it with an each loop, i just get the first layer of the map.

what i want to to achieve is, that all necessary classes are created with the respective values. here is an example:

.button {
	
	&.primary {
		border: [border];
		color: [color];

		&:hover {
			border: [border-hover];
			color: [color-hover];
		}		
	}
	&.secondary {
		border: [border];
		color: [color];

		&:hover {
			border: [border-hover];
			color: [color-hover];
		}		
	}

	
}

I'm happy for every useful tip :)


Solution

  • It is actually pretty trivial and straightforward. All you need to do is to use @each loop over your map and extract values using map functions.

    .button {
      @each $type, $styles in $buttons {
        &.#{$type} {
          border: map-get($styles, border);
          color: map-get($styles, color);
    
          &:hover {
            border: map-get($styles, border-hover);
            color: map-get($styles, color-hover);
          }     
        }
      }
    }