loops - 循环遍历嵌套的 SASS 映射以创建类

Question

我尝试遍历嵌套的 sass 映射来创建按钮类。这可能吗？

我的地图是这样嵌套的：

$buttons: (
	primary: (
		border: 1px solid #ccc,
		border-hover: 1px solid #ccc,
		color: red,
		color-hover: blue
	),
	secondary: (
		border: 1px solid #ccc,
		border-hover: 1px solid #ccc,
		color: red,
		color-hover: blue
	)
);

当我尝试使用每个循环遍历它时，我只会得到地图的第一层。

我想要实现的是，所有必要的类都是用各自的值创建的。这是一个例子：

.button {
	
	&.primary {
		border: [border];
		color: [color];

		&:hover {
			border: [border-hover];
			color: [color-hover];
		}		
	}
	&.secondary {
		border: [border];
		color: [color];

		&:hover {
			border: [border-hover];
			color: [color-hover];
		}		
	}

	
}

我很高兴每一个有用的提示:)

Answer 1

它实际上非常简单明了。您需要做的就是在地图上使用循环并使用地图函数@each提取值。

.button {
  @each $type, $styles in $buttons {
    &.#{$type} {
      border: map-get($styles, border);
      color: map-get($styles, color);

      &:hover {
        border: map-get($styles, border-hover);
        color: map-get($styles, color-hover);
      }     
    }
  }
}