Início / coding / Perguntas / 77488897
Accepted
Meek
Asked: 2023-11-15 23:17:29 +0800 CST

Como fazer loop de mapas aninhados no SASS

  • 772

Estou tentando fazer um loop de mapas aninhados no sass para criar certas variáveis ​​​​css para uma lista de temas.

Eu tenho um mapa de temas como este:

$themes: (
    theme-1: (
        primary: (
            "el-background": #000,
            "el-background-hover": #0d0d0d,
            "el-color": #2c2f33,
            "el-link-color": #fff,
        ),
        secondary_1: (
            "el-background": #000,
            "el-background-hover": #ccc,
            "el-color": #f2f2f2,
            "el-link-color": #fff,
        )
    ),
    theme-2: (
        primary: (
            "el-background": #f90,
            "el-background-hover": #ccc,
            "el-color": #000,
            "el-link-color": #fff,
        ),
        secondary_1: (
            "el-background": #f2f2f2,
            "el-background-hover": #000,
            "el-color": #f2f2f2,
            "el-link-color": #fff,
        )
    )
);

Estou esperando um resultado como este em css:

.theme-1 {
    .primary {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }

    .secondary_1 {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }
}

.theme-2 {
    .primary {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }

    .secondary_1 {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }
}

Como faço para ajustar esse loop para conseguir isso? Acho que preciso embrulhá-lo em outro, @eachmas não sei como.

@mixin theme() {
    @each $theme, $map in $themes {
        .#{$theme} {
            @each $key,
            $value in $map {
                --#{$key}: #{$value};
            }
        }
    }
}
sass

1 respostas

  1. Best Answer

    Você só precisa adicionar outro loop para revisar os valores em 'primário' e 'secundário_1'. Algo assim:

    @mixin theme() {
    @each $theme, $map in $themes {
        .#{$theme} {
            @each $key, $value in $map {
              .#{$key} {
                @each $varName, $varValue in $value {
                  --#{$varName}: #{$varValue};
                }
              }
            }
        }
    }
}

:root {
  @include theme();
}

    Solução no playground SCSS

    • 0

relate perguntas