首页 > 代码库 > @at-root和#{&}结合

@at-root和#{&}结合

2024-07-09 16:08:34   221人阅读

Sass有脚本模式#{}，他和&不同之处是，&只用作选择器，它只能出现在一个复合的开始选择器，类似于一个类型选择器，如a或者h1。但#{}他表示的是一个插值，它可以用在任何地方。同样的，当@at-root和#{&}一起使用时，可以给我们的开发带来极大的方便与优势。例如：

SCSS
.foo {    @at-root .bar #{&} {        color: gray;    }}
CSS
.bar .foo {  color: gray; }

可能会让你感到意外与失望，因为你从上面的代码之中并没有看到他有特别之处。或者说能帮你减少什么？也不能帮你优化什么？不过不用太心急，接着往下看。

先快速回忆一下BEM,如：

.block {} //Block.block__element{} //Element.block--modifier{} //Modifier

此时使用@at-root就能尽显其英雄本色：

SCSS
.block {    color:red;    @at-root #{&}__element{        color:green;    }    @at-root #{&}--modifier {        color:blue;    }}
CSS
.block {  color: red; }.block__element {  color: green; }.block--modifier {  color: blue; }

到了这里，你是否体会到@at-root在BEM中是具有多大的优势了吧。不急，后面将来个实例，让你一览其整个过程。

 


联系
我们