关于@at-root
何种情况下使用呢？请教
3 回答
sass语法：
.block {
color: red;
#{&}__element {
color:blue;
}
#{&}--modifier {
color: orange;
}
}
css结果：
.block {
color: red;
}
.block .block__element {
color: blue;
}
.block .block--modifier {
color: orange;
}
这里我们实现的是BEM约定的css命名规则，不希望嵌套的发生，则可以使用@at-root,它在sass>3.3版本以上才有这个功能，改写如下：
sass语法：
.block {
color: red;
@at-root #{&}__element {
color: blue;
}
@at-root #{&}--modifier {
color:orange;
}
}
css结果：
.block {
color: red;
}
.block__element {
color: blue;
}
.block--modifier {
color: orange;
}
详细了解看如下网址：
sass @at-root
http://www.w3cplus.com/preprocessor/Sass-3-3-new-feature-at-root-bem.html
BEM css命名规则：
https://en.bem.info/method/naming-convention/
举报
0/150
提交
取消
