Question

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

$_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
            }
        }
    }
}

但我收到了语法错误：

 error sass/test.scss (Line 21: Invalid CSS after "...d-color: $color": expected ";", was "[base];")

Answer 1

您可以使用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;
}

Answer 2

使用SassScript地图（不是＆＃34;源地图＆＃34 ;;那些是different）时的一个好习惯是始终引用密钥。例如：

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

为了与CSS兼容，Sass将一些不带引号的标识符（包括ocean）解释为颜色名称，并在内部将它们转换为颜色值。当发出压缩输出时，Sass将尝试生成这些颜色的最小可能表示，在这种情况下是十六进制代码。引用键清楚地表明它们应该始终是字符串，并且应该始终使用它们的字符串值发出。

Answer 3

修正了问题1！

这是在map-get中进行另一个map-get的情况。完成后，我不得不引用默认值（这是基数）。只要我的所有默认值都有一个基值，这似乎工作正常：

@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}{

或

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

感谢您的回复，如果有人知道编译问题会很棒。

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

3 个答案: