如何在SCSS中删除伪选择器?

时间:2018-11-22 05:56:30

标签: css sass nested selector extend

在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删除不需要的伪选择器?

1 个答案:

答案 0 :(得分:4)

您可以placeholder selector(%)#foo#bar声明共享属性

See example

用法如下:

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