如何将标记作为scss混合参数传入？

我正在创建一个mixin以子元素为目标。 例子。 针对父项的所有

标记，该父项的父项为

部分---蓝色

我想我可以将标记作为参数传递，如下所示 但是我没有得到想要的结果

SCSS

@mixin themeParent ($child) {
    &--blue $child {
        color: getColour("theme", "bluehighlight");
    }

    &--green $child {
        color: getColour("theme", "greenhighlight");
    }

    &--purple $child {
        color: getColour("theme", "purplehighlight");
    }
}

.section {
 @include themeParent(a);
}

我本以为这会编译成

.section--blue a {
color: blue;

}

---

有人能给我解释一下原因吗？

把

$child

放在

{$child}

里

@mixin themeParent ($child) {
    #{$child} {
        color: #000;
    }
}

.section {
    @include themeParent(a)
}

输出：

.section a {
  color: #000;
}

---

如果我用一种简单的方式来解释，那么就不需要将标记作为参数传递给mixin函数，而应该传递元素的颜色

<div className="section--blue">
                    <a>section blue</a>
</div>

<div className="section-green">
           <a>section green</a>        
</div>

希望这是有用的

@mixin themeParent ($child) {
    &--blue #{$child} {
        color: blue;
    }
}

输出：

.section——蓝色a{color:blue；}

---

如果您想要更具体，只需添加另一个

&

：

@mixin themeParent ($child) {
    &#{&}--blue #{$child} {
        color: blue;
    }
}

输出：

.section.section--blue a{color:blue；}

---

如果您想要更粗糙，只需迭代您想要的颜色：

@mixin themeParent ($child) {
  $colors: red, blue, green;
  @each $color in $colors {
    &#{&}--#{$color} #{$child} {
        color: $color;
    }
  }
}

---

谢谢，但我认为这意味着孩子总是需要一个where，因为我想改变孩子的元素

@mixin themeParent ($child) {
  $colors: red, blue, green;
  @each $color in $colors {
    &#{&}--#{$color} #{$child} {
        color: $color;
    }
  }
}