css - 如何将标签作为 scss mixin 参数传递？

Question

我正在创建一个 mixin 来定位一个子元素。例子。定位<a>具有父级的父级的所有标签section---blue

我认为我可以将标签作为参数传递如下但我没有得到想要的结果

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;

}

有人可以向我解释为什么吗？

Answer 1

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

输出：.section--blue 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;
    }
  }
}

Answer 2

放入。$child_#{$child}

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

.section {
    @include themeParent(a)
}

输出：

.section a {
  color: #000;
}

Answer 3

如果我用一种简单的方式来说明，则不需要将标签作为参数传递给 mixin 函数，你应该传递元素的颜色。

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

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

混合和CSS

@mixin themeParent ($color) {
   color:$color;
 }
.section{
    &--blue {
        a{
            @include themeParent(blue);
        }
    }
    --green{
        a{
            @include themeParent(green);
        }
    }
}

希望这是有用的。