Sass Ampersand to add Tag to Class

Question

I have some Sass like this:

.zbounce1, .zbounce2, .zbounce3, .zbounce4
    animation-name: bounceIn
    animation-duration: .5s
    animation-timing-function: ease-in-out

span.zbounce1, span.zbounce2, span.zbounce3, span.zbounce4
    display: inline-block

I would like to simplyfy the second part to a nested bit of the first part, so I don't have to mention every class again:

    span.&
        display: inline-block

Sadly, this is not legal. (The other way round, specializing a bunch of styles with a nested &.anotherClass is easy...

Any workaround to achieve this? (perhaps with the @extendOnly-Placeholder?) or some funky sass concatenation...?

I'm not sure this is a SASS issue. If all 4 classes share the same animation, could you not create a new class, `zbounce`, and apply it to all 4 elements? Apologies if I've misunderstood — sol, Nov 21 '17 at 16:41
it's not about the specific properties. Think `background: green` vs. `red`. Just aboute a comfortable „class-rementioning“... (for which one in many cases can use `&` for...) — Frank N, Nov 21 '17 at 16:47
I see. Does this question help? https://stackoverflow.com/questions/17268051/sass-combining-parent-using-ampersand-with-base-element — sol, Nov 21 '17 at 16:52
@ovokuro Those [selector functions](http://sass-lang.com/documentation/Sass/Script/Functions.html) mentioned in the most popular answer, might indeed help... — Frank N, Nov 21 '17 at 17:07

score 4 · Accepted Answer · answered Nov 21 '17 at 17:08

You can achieve this in native sass, it's just a bit convoluted. You need to use selector-append to add the span to all of the selectors, and @at-root to do so at root level (if that makes sense? it's hard to even explain). Basically it looks like this:

.zbounce1, .zbounce2, .zbounce3, .zbounce4 {
  animation-name: bounceIn;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  @at-root #{selector-append(span, &)} {
    display: inline-block;
  }
}

Which should output this result:

.zbounce1, .zbounce2, .zbounce3, .zbounce4 {
  animation-name: bounceIn;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
}
span.zbounce1, span.zbounce2, span.zbounce3, span.zbounce4 {
  display: inline-block;
}

Here's a Codepen example (you'll have to view source and look for the style block in the header to see the output, I'm not sure how else to demonstrate it but hopefully this helps!)

score 1 · Answer 2 · answered Nov 21 '17 at 17:10

Ladies and gentlemen...

.zbounce, .zbounce1, .zbounce2, .zbounce3, .zbounce4, .zbounce5
    ...
    @at-root #{selector-append(span, &)}
        display: inline-block

getting me, what I want:

span.zbounce, span.zbounce1, span.zbounce2, 
span.zbounce3, span.zbounce4, span.zbounce5 { 
    display: inline-block;
}

Thanks to @ovokuro for pointing me into the – right – direction!

Sass Ampersand to add Tag to Class

2 Answers2

Linked