如何访问映射的特定元素? [英] How do I access a specific element of a mapping?

问题描述

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

I have the following mapping to contain all of the colours from my theme:

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

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

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

I know how to use an @each loop to get the key/value information from a mapping, but how can I directly access the value of a mapping without using a loop? I tried using square brackets like you would in other languages like JavaScript:

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

但我收到了一个语法错误:

But I get a syntax error instead:

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

推荐答案

您可以使用 map-get 功能.Sass 不提供用于访问映射值的特殊语法.

You have the use the map-get function. Sass does not provide a special syntax for accessing values of a mapping.

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

这篇关于如何访问映射的特定元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！