关于@at-root
qq_忒修斯_0
2015-09-20 14:48
何种情况下使用呢？请教
3回答
-
- 慕粉1137201464
- 2017-03-29 17:36:57
我的理解就是为了减少权重，既然这样干嘛还要写嵌套呢？
-
- lafeillou
- 2016-03-04 13:46:22
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/
-
- echo_kinchao
- 2015-09-21 10:14:39
这是sass3.3的内容
Sass进阶篇
46635 学习 · 97 问题
相似问题