CODEWITHSUNDEEP
sass
user3919853
user3919853

Reputation: 13

Using each inside array in sass

I have custom theme colors

$theme-colors-custom: (
    abc--bg:   #fafafa,
    abc--text: #ccc

);

my problem is that I would have to manualy type names (abc--bg,abc--text,...) but I would like to generate them using other variables from below. I it possible to dinamicly assign color using each, something like this to $theme-colors-custom:

$my-variable-prefix: "abc";
$theme-light-name: 'light';
$theme-dark-name: 'dark';
$body-bg-light:             #fafafa;
$body-text-light:           #ccc;
$body-bg-dark:              #212121;
$body-text-dark:            #ddd;

$themes: (
    light: (
        bg:                 $body-bg-light,
        text:               $body-text-light,
    ),
    dark: (
        bg:                 $body-bg-dark,
        text:               $body-text-dark,
    ),
);


$theme-colors-custom: (
    $name-variables: map-get($themes, 'light');
    @each $key, $value in $name-variables {
        #{$my-variable-prefix}--#{$key}: #{$value},
    }
);

The expected result would be:

$theme-colors-custom: (
    abc--bg: #fafafa,
    abc--text: #ccc,
);

Upvotes: 1

Views: 160

Answers (1)

Arkellys
Arkellys

Reputation: 7780

Yes it is possible, but you need to do the each loop outside of the map and use map-merge:

$theme-colors-custom: ();
$name-variables: map-get($themes, 'light');

@each $key, $value in $name-variables {
    $keyName: #{$my-variable-prefix}--#{$key};
    $theme-colors-custom: map-merge($theme-colors-custom, ($keyName: $value));
}

Upvotes: 1

Related Questions