Pass pseudo element selector as variable in SASS

Question

I would like to know how I can pass a pseudo selector as variable in SASS. I have the following mixin

@mixin pseudoawesome($fa-symbol, $pseudo) {
  &$pseudo { // <-- here is the error
    content: $fa-symbol;
    font-family: FontAwesome;
  }
}

and I want to use it like:

@include pseudoawesome(' \f105', ':after');

but I cannot pass :after as argument for $pseudo. Is this somehow possible, or doesn't allow SASS using variables as selector at all?

Thanks

Answer 1

Yes, you can. You must write the name of variable inside the braces:

#{$yourVariable}

@mixin pseudoawesome($fa-symbol, $pseudo) {
  &#{$pseudo} {
    content: $fa-symbol;
    font-family: FontAwesome;
  }
}

EDIT: you can find this information here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_

Just search with chrome: "If you want to use"

The section didn't have the anchor tags.