Sass Mixin несколько свойств в цикле

Question

Я потерян и не уверен, почему это компилируется, но ничего не выводит. Также даже не уверен, правильно ли я подхожу к этому. Я начал использовать миксин в цикле, чтобы определить кучу цветов. Это прекрасно работает, за исключением того, что в зависимости от места, где мне может понадобиться передать цвета в свойства 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}.