我遇到了一个小问题,但是目前还没有搜索到任何结果。但这个问题一直出现。
我正在使用SASS预处理器来使用@at-root根节点,以便我可以使用BEM CSS语法。
我有以下的SCSS代码:
.cc_sidebar,.cc_popup{
.btn{
display: inline-block;
cursor: pointer;
@at-root{
#{&}--icon{
width: 25px;
}
}
}
}
期望的图标修改器类的输出为:
.cc_sidebar .btn--icon,cc_popup .btn--icon{width: 25px;}
但是实际上我得到的是:
.cc_sidebar .btn, .cc_popup .btn--icon{width: 25px;}
第一个父选择器没有应用--icon。它应该被应用吗?还是我没有完全理解@at-root的工作原理?
任何想法或反馈都将不胜感激。
是的,整个内容必须用两个父选择器包装。