从 SASS 嵌套列表访问特定值

Question

我有以下 sass 变量：

$color-config:(     "white":    #FFF, 
                    "black":    #303133
);

我想访问 'black' 值 (#303133) 而无需循环。类似的东西：

body
    color: $color-config("black")

（我知道，完全错了，只是为了解释我想要的）

Answer 1

您可以使用 SASS 的映射将值存储在变量中：

$color-config:(
   white: #FFF, 
   black: #303133
);

然后使用map-get() to access it (see here):

content: map-get($color-config, white); # will return #FFF

换句话说，不要在变量名周围使用双引号 "。

Answer 2


$color-config:(
    'white': #FFF, //quotes are important
    'black':    #303133
);

@function colors($value) {
  @return map-get($color-config, $value)
}

.white-font {
color: colors('white')
}

从 SASS 嵌套列表访问特定值

Accessing specific value from SASS nested list

css

sass

compass-sass