O
O
Outsider V.2017-11-05 11:37:50
css
Outsider V., 2017-11-05 11:37:50

How to effectively use SASS with modifiers?

There is a panel .panel, it has inactive .panel__button and active .panel__button_active buttons. I write like this:

.panel {
//...

&__button {
//...
  &_active  {
     @extend &;
     background: yellow;
  }

 }

}

That is, I need the button with the _active modifier to have the same styles as without + the changes I specified. What I wrote, of course, does not work - it says that the parent selector cannot be inherited.
How to realize the idea? To save nesting and not re-write entire selectors.
The option of specifying two classes in HTML is not considered.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
O
Outsider V., 2017-11-05
@Audiophile

Happened:

.panel {
//...

&__button {
//...
$this: &;
  &_active  {
       @extend  #{$this};
       background: yellow;
  }

 }

}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question