Extend from a class that has a concatenated element

Question

I'm currently starting to work seriously with sass but I'm very noob yet. I'm wondering how can I do to extend these styles to another class in a simple way.

I have this style

.active-state + label {
    font-size: 70%;
    padding: 0.8rem 2rem;
  }

And want to extend it, exactly in another place (same file). Because if I do this:

.another-class{
    @extend .active-state;
}

doesn't work.

Do I need to do a mixin and include it in both classes or is there a way to avoid this?

Can you change the name for the first style instead of `.active-state + label {` to be `.active-state, .label {` and try to extend it again or try to create another class and try to extend it with a single name? — Mohamed Bdr, Feb 09 '21 at 23:49
you can check this link too for more help [including-another-class-in-scss](https://stackoverflow.com/questions/9560170/including-another-class-in-scss) — Mohamed Bdr, Feb 09 '21 at 23:54
@MohamedBdr label is a HTML node, not a class. Doesn't work like that — Iván, Feb 09 '21 at 23:55
right!, check this link as I think it can be helpful for you [extending-in-sass](https://www.smashingmagazine.com/2015/05/extending-in-sass-without-mess/) — Mohamed Bdr, Feb 10 '21 at 00:00

score 1 · Accepted Answer · answered Feb 10 '21 at 07:10

You can't extend a nested selector, however as a workaround you can use a placeholder selector and extend it:

%myStyles {
   font-size: 70%;
   padding: 0.8rem 2rem; 
}

.active-state + label {
   @extend %myStyles;
}

.another-class {
   @extend %myStyles;
}

It will compile as:

.active-state + label, .another-class {
  font-size: 70%;
  padding: 0.8rem 2rem;
}

Extend from a class that has a concatenated element

1 Answers1