css - 带有多个父选择器的 SASS @at-root

Question

我遇到了一个小问题，目前搜索还没有得到任何结果。但它是不断出现的东西。

我正在使用 SASS pre 来处理 @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 的全部工作原理？

如有任何想法或反馈，我们将不胜感激。

是的，整个事情确实必须用两个父选择器包裹起来。

Answer 1

这肯定是 Sass 中的一个错误，在最新版本 (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。

我实际上对其进行了一些测试，是的，实际上有 两个 错误!我在 Sass 问题中填写了它们:https://github.com/nex3/sass/issues/1003和 https://github.com/nex3/sass/issues/1004 ，这样您就可以在修复代码时使用您的代码。

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