Sass 在一个循环中混合多个属性

Question

我迷路了，不知道为什么会编译但不输出任何东西。甚至不确定我是否正确地接近这个。我开始在循环中使用 mixin 来定义一堆颜色。这很好用，除了取决于我可能需要将颜色传递给颜色、边框颜色或背景颜色属性的位置。此外，我可能需要将相同的颜色传递给处于 :hover 状态的这些属性之一。这会编译，但如果调用它实际上不会输出任何内容。

// Category Colors
$category-1: #29b473 !default;
$category-2: #60e2c9 !default;
$category-3: #25a9e0 !default;
$category-4: #2b52ff !default;
$category-5: #c5a0ff !default;
$category-6: #ea2f69 !default;
$category-7: #ec1c24 !default;
$category-8: #f6921e !default;
$category-9: #cccc00 !default;

$categories: () !default;
$categories: map-merge((
	"red": $category-1,
	"blue": $category-2,
	"black": $category-3,
	"green": $category-4,
	"yellow": $category-5,
	"pink": $category-6,
	"gray": $category-7,
	"orange": $category-8,
	"brown": $category-9,
), $categories);

// Mixins
@mixin category($parent, $color, $props, $hovers:null) {
	#{$parent} {
		@each $prop in $props {
			$prop:$color;
		}
		@if ($hovers) {
			&:hover {
				@each $hover in $hovers {
					$hover:$color;
				}
			}
		} @else {}
	}
}

// Testing
@each $color, $value in $categories {
	@include category('.xyz-#{$color}', $value, (color, border-color), background-color);
}

请忽略颜色的奇怪之处，它们实际上并不是它们所标记的颜色。

Answer 1

想通了，需要将用于属性名称的语句更改为这种格式：

{$prop} 和 #{$hover}。