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 :)
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);
}
}
}
}