如何使用 sass map-get 和 sass 语法？ [复制]

Question

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

我还想使用map 功能来声明一些key-value 变量...

例如：

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

我的问题是我找不到如何用.sass 语法编写那些map 变量。

我已经尝试过类似的方法：

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

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

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

Error: Illegal nesting: Nothing may be nested beneath variable declarations.

我的 sass 版本是：

Sass 3.4.11 (Selective Steve)

有人知道如何像.sass 语法那样使用它吗？

Answer 1

嗯，这是.sass 语法作为免费功能的问题。你可以加入关于它的讨论on github。但它只是指向著名的multiline-issue 的指针，也有人讨论过on github。

你能做些什么呢？只需使用单线。和map-merge 函数用于长声明。阅读它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; }