Sass 如何访问映射的特定元素？

我有以下映射来包含我的主题中的所有颜色：

$_base-ocean:rgb(13,176,184);
$_base-hover:10%;

$themes: (
    ocean: (
        base: $_base-ocean,
        hover: darken($_base-ocean, $_base-hover)
    )
);

我知道如何使用

@each

循环从映射中获取键/值信息，但如何在不使用循环的情况下直接访问映射的值？我尝试使用方括号，就像在JavaScript等其他语言中一样：

@each $name, $colors in $themes {
    [data-page="home"] {
        #slider-pagers{
            a.#{$name} {
                background-color: $colors[base]; // <- line 21
            }
        }
    }
}

---

您可以使用map get函数。Sass不提供访问映射值的特殊语法

@each $name, $colors in $themes {
    [data-page="home"] {
        #slider-pagers{
            a.#{$name} {
                background-color: map-get($colors, base);
            }
        }
    }
}

现在您将获得以下输出：

[data-page="home"] #slider-pagers a.ocean {
  background-color: #0db0b8;
}

修正问题1

这是一个在map get中执行另一个map get的案例。完成后，我必须引用默认值（这是base）。只要我的所有默认值都有一个基值，这似乎就可以正常工作：

@each $theme-colour, $color in $site-global {
    [data-page="home"]{
        #slider-pagers a.#{$theme-colour}{
            background-color:map-get(map-get($site-global, $theme-colour), base);
        }
    }
}

当以下代码出现时，它仍然无法缩小：

#{$variable_here}

有趣的是，此代码没有：

#slider-pagers a #{$theme-colour}{

或

---

感谢您的回复，如果有人知道编译问题，那将是一个非常好的问题。

使用SassScript映射（不是“源映射”；它们是）时的一个好做法是始终引用键。例如：

$site-global: (
    "ocean": (
        "base": $_base-ocean,
        "hover": darken($_base-ocean, $_base-hover)
    )
);

---

为了与CSS兼容，Sass将一些不带引号的标识符（包括

ocean

）解释为颜色名称，并在内部将它们转换为颜色值。当发出压缩输出时，Sass将尝试生成这些颜色的最小可能表示形式，在本例中为十六进制代码。引用这些键可以清楚地表明它们应该始终是字符串，并且应该始终与它们的字符串值一起发出。

还没有测试过您的键，但我在冗长的回答中似乎忽略了这一点。请问需要做哪些修改来更正上述代码？如果我理解上述内容，这是否意味着我需要创建一个颜色较少的名称字符串？

#slider-pagers a#{$theme-colour}{

$site-global: (
    "ocean": (
        "base": $_base-ocean,
        "hover": darken($_base-ocean, $_base-hover)
    )
);