我可以使用psuedo元素作为scss mixin的参数吗?

时间:2018-11-23 04:01:55

标签: sass mixins scss-mixins

我有一个mixin,我以“元素”作为参数。

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

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

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

    &--gossamer #{$child}  {
        color: getColour("theme", "gossamerhighlight");
    }

    &--black #{$child}  {
        color: getColour("theme", "black");
    }
}

例如,如果我引用的是ap,则此方法很好

HTML

<div class="div--blue">
    <a>blue link</a>
</div>

SCSS

div {
    @include themeParent(a);
}

但是我还想将mixin用于伪元素,例如。

div {
    @include themeParent(a:hover);
}

 div {
        @include themeParent(>a:hover);
    }


 div {
        @include themeParent(&:first-child);
    }

这可能吗? 为什么我正在做的使SCSS不开心的事情:-(

1 个答案:

答案 0 :(得分:1)

您只需要将参数放在字符串中即可。

DEMO

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

.cool {
  @include themeParent('a:hover');
  @include themeParent('&:first-child');
}