主页 / coding / 问题 / 77488897
Accepted
Meek
Asked: 2023-11-15 23:17:29 +0800 CST

如何在 SASS 中循环嵌套映射

  • 772

我正在尝试在 sass 中循环嵌套地图，以便为主题列表创建某些 css 变量。

我有一个这样的主题图：

$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,
        )
    )
);

我期望在 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: ...;
    }
}

我如何调整这个循环来实现这一目标？我想我需要把它包裹在另一个@each但不知道如何。

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

1 个回答

  1. Best Answer

    您只需要添加另一个循环来检查“primary”和“ secondary_1”中的值。像这样的东西：

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

:root {
  @include theme();
}

    SCSS Playground上的解决方案

    • 0

相关问题