其实伪类嵌套和属性嵌套非常类似,只不过他需要借助`&`符号一起配合使用。我们就拿经典的“clearfix”为例吧:
.clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } }
编译出来的 CSS:
clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }
避免选择器嵌套:
为了防止此类情况,我们应该尽可能避免选择器嵌套。然而,显然只有少数情况适应这一措施。
在编辑器第2行输入正确的代码,使编译出来的CSS代码如下:
.box:before{ content:"伪元素嵌套"; }
.box{ ? { content:"伪元素嵌套"; } }