Creating class names from source map keys

Question

I'm getting an error saying that ('background-color': #333) is not valid css. I'm trying to get the theme name to append to .body-- for each theme (there's only one them for now). The error looks to me like it's trying to add the contents of theme-name to .body-- instead of just the title of it.

$themes: (
    'dark': (
        'background-color': #333
    ),
);

@each $theme-name in $themes {
    .body--#{$theme-name} {
        & .container {
            background-color: map-get($theme-name, background-color);
        }
    }
}

I'm trying to get:

.body--dark {}
.body--dark .container {background-color: #333}

Thanks

muecas · Accepted Answer · 2018-06-08T22:25:07.080

The problem is in your @each statement. You are getting just the map value, instead of the key and the value.

$themes: (
    'dark': (
        'background-color': #333
    ),
);

// get the key and the value in two separate variables: first variable is the key, second one the value
@each $theme-name, $theme-config in $themes {
    .body--#{$theme-name} {
        .container {
            background-color: map-get($theme-config, 'background-color');
        }
    }
}

As a note, you don’t need the & for nested selectors. That’s just the default behavior. Use the & only for pseudo classes, concatenate class names, aggregated class names and some other strange selector usages. Check my answer about this note on this other question.

Creating class names from source map keys

1 Answers1