如何删除 SCSS 中的伪选择器？

Question

在 SCSS 中，我使用 @extend 在 1 行中合并 2 个选择器，但是伪选择器（: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;
}

How to remove pseudo selector in SCSS?