Can I use psuedo elements as an argument to a scss mixin?

Question

I have a mixin that I'm referencing an "element" as the argument.

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

This works fine if I am referencing an a or a p for example

HTML

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

SCSS

div {
    @include themeParent(a);
}

But I want also use the mixin for psuedo elements eg.

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

or

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


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

is this possible? Why is what I'm doing making SCSS not happy :-(

Answer 1

You just need to put your argument in a string.

DEMO

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

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