Sass @使用map get（）的每个循环

我正在尝试使用>map get（）和@each循环执行此代码，但出现错误，请帮助

$names: (
    (
        "name": "name-1",
        "filename": "name-1.jpg",
        "color": "blue",
    ),

    (
        "name": "name-2",
        "filename": "name-2.jpg",
        "color": "red",
    )
);

@each $name in $names {
    $name: map-get($names, "name");
    $filename: map-get($names, "filename");
    $color: map-get($names, "color");

    .#{$name} {
        background-image: url("#{$filename}");
        color: $color;
    }
}

---

您的

$names

列表不需要密钥。当您在嵌套列表中循环时，您可以定义变量键，也不需要将它们括在引号中，就像它们是

字符串一样。在
@each
循环中，定义列表中的每个变量键后，可以使用括号内的每个变量

//-Updated SASS List, included list in name to make it more clear.
$names-list: (
  (
    name-1,
    name-1,
    blue
  ),

  (
    name-2,
    name-2,
    red
  )
);

//-Updated @each loop, defined variable keys for each item in the list.
@each $name, $fileName, $color in $names-list {
    .#{$name} {
       background-image: url('#{$fileName}.jpg');
       color: color;
     }

 }
 //-The code above compiles to the following CSS Classes with the properties defined inside
 .name-1 {
     background-image: url("name-1.jpg");
    color: color;
  }

 .name-2 {
   background-image: url("name-2.jpg");
   color: color;
  }

你得到这个错误是因为你没有循环真正的地图（）

您可以使用嵌套映射来解决问题。大概是这样的：

$names: (
    layout-1: (
        name: "name-1",
        filename: "name-1.jpg",
        color: blue
    ),

    layout-2: (
        name: "name-2",
        filename: "name-2.jpg",
        color: red
    )
);


@each $key, $value in $names {
  .#{map-get($value, name)} {
    background-image: url("#{map-get($value, filename)}");
    color: map-get($value, color);
  }
} 

我的全部代码都错了。非常感谢。也谢谢你的链接。谢谢你，丹尼尔。这是非常有帮助的，尤其是在可读性和编写更少的代码方面。