如何在Sass语法中使用Sass Map-get？

问题描述

我正在使用sass启动一个项目，我更喜欢用 .sass 语法编写它。

I'm starting a project using sass and I prefer to write it in .sass syntax.

另外，我想使用功能来声明一些键值变量...

Also I would like to use the map feature in order to declare some key-value variables...

例如：

$primary-colors: (
  "red":   "#ff0000",
  "green": "#00ff00",
  "blue":  "#0000ff"
);

/* Key and value together */
@each $color in $primary-colors {
  .thing {
    content: "#{$color}";
  }
}

/* Key and value separate */
@each $color-name, $color-code in $primary-colors {
  .color-#{$color-name} {
    background: $color-code;
  }
}

我的问题是我找不到怎么写那些 map 变量为 .sass 语法。

My issue is that I could not find how to write those map variables in .sass syntax.

I已经尝试过类似的东西：

I already tried something like:

$primary-colors: (
   "red": "#ff0000"
)

$example: map-get($primary-colors, "red")

当我尝试编译它时出现此错误：

And I get this error when I try to compile it:

错误：非法嵌套：变量声明下不得嵌套任何内容。

我的sass版本是：

Sass 3.4.11（选择性史蒂夫）

有人知道如何使用它吗，如 .sass 语法？

Does anyone know how to use it like .sass syntax?

推荐答案

嗯，这是 .sass 语法是一项免费功能。您可以在github上加入有关该主题的讨论。但这仅是著名的 multiline-issue 的指针，并且还在上。

Well, this is a problem which goes with .sass syntax as a free feature. You can join a discussion about it on github. But it's just a pointer to the well-known multiline-issue, and it is also discussed on github.

对此您可以做什么？只需使用一线即可。 map-merge 函数用于长声明。在文档中。

What you can do about that? Just use one-liners. And map-merge function for long declarations. Read about it in the docs.

$array: (1: '1', 2: '2', 3: '3')
$second_array: (4: '4', 5: '5')
$merged: map-merge($array, $second_array)

@each $num, $str in $merged
  .link-#{$str}
    z-index: $num

输出将会是：

.link-1 { z-index: 1; }

.link-2 { z-index: 2; }

.link-3 { z-index: 3; }

.link-4 { z-index: 4; }

.link-5 { z-index: 5; }

这篇关于如何在Sass语法中使用Sass Map-get？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！