在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
删除不需要的伪选择器?
答案 0 :(得分:4)
您可以placeholder selector(%)
向#foo
和#bar
声明共享属性
用法如下:
%shared {
position: relative;
}
#foo{
@extend %shared;
&:before {
width: 200px;
content:'';
}
}
#bar {
@extend %shared;
}