如何将标记作为 scss mixin 参数传递？

Question

我正在创建一个 mixin 来定位一个子元素。例子。定位具有 section---blue

父级的父级的所有 <a> 标签

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

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

将$child放入#{$child}。

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

.section {
    @include themeParent(a)
}

输出：

.section a {
  color: #000;
}

Answer 2

如果我用简单的方式表达，则无需将标签作为参数传递给 mixin 函数，您应该传递元素的颜色。

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

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

mixin 和 css

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

希望这有用。

Answer 3

@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;
    }
  }
}

如何将标记作为 scss mixin 参数传递？

How can I pass a tag in as a scss mixin argument?

css

sass

scss-mixins