Sass Mixin循环中的多个属性

Question

我迷路了，不知道为什么编译但什么都不输出。同样也不确定我是否正确地处理了这个问题。我开始在循环中使用mixin定义一堆颜色。效果很好，除了根据位置，我可能需要将颜色传递给color，border-color或background-color属性。另外，我可能需要将相同的颜色传递给处于：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}。