Как убрать псевдоселектор в SCSS?

Question

В SCSS я использовал @extend для объединения 2 селекторов в 1 строку, но псевдоселектор (: before) создается внутри #bar следующим образом:

#foo {
  position: relative;
  &:before {
    width: 200px;
  }
}
#bar {
  @extend #foo;
}

Выход:

#foo, #bar {
  position: relative; 
}
#foo:before, #bar:before {
  width: 200px; 
}

Я хочу сделать так, используя SCSS:

#foo, #bar {
  position: relative; 
}
#foo:before {
  width: 200px; 
}
/* I want to remove #bar:before */

Есть ли способы удалить нежелательный псевдо-селектор, создав @extend?

Answer 1

Вы можете placeholder selector(%), чтобы объявить ваши общие свойства равными #foo и #bar

См. Пример

Используйте как показано ниже:

%shared {
  position: relative;
}
#foo{
   @extend %shared;
    &:before {
    width: 200px;
    content:'';
  }
}
#bar {
    @extend %shared;
}