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

将$child放入#{$child}。

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

.section {
    @include themeParent(a)
}

输出：

.section a {
  color: #000;
}

Answer 2

@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 3

如果我简单地说明这一点，则无需将标记作为参数传递给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);
        }
    }
}

希望这很有用。

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

3 个答案: