SASS @at-root与多个父选择器

Question

我遇到了一个小问题，但是目前还没有搜索到任何结果。但这个问题一直出现。

我正在使用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的工作原理？

任何想法或反馈都将不胜感激。

是的，整个内容必须用两个父选择器包装。

- Fernker

Answer 1

这肯定是Sass中的一个bug，在最新版本(gem install sass --pre)中，你的代码会被扩展为：

.cc_sidebar .btn,
.cc_popup .btn {
  display: inline-block;
  cursor: pointer; }
  .cc_sidebar .btn, .cc_popup .btn--icon, .cc_sidebar .btn, .cc_popup .btn--icon {
    width: 25px; }

你可以看到有重复的.cc_sidebar .btn, .cc_popup .btn--icon .cc_sidebar .btn, .cc_popup .btn--icon 部分，所以看起来像个bug。

我测试了一下，实际上有两个bug！我在Sass问题中填写了它们：https://github.com/nex3/sass/issues/1003和https://github.com/nex3/sass/issues/1004，所以当它们被解决后，你就可以使用你的代码。

由于问题出在多个选择器上，唯一的解决方法是不使用它们 :(

- kizu

---

太棒了！感谢您确认我没有疯掉并提交了那些错误报告。我一直在想这是否是一个错误，但在提交错误报告之前想要确定。谢谢！ - Fernker