Question

我有一个小问题，搜索还没有产生任何结果。但它不断出现。

我正在使用SASS pre来使用@ at-root 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，因此您可以在修复代码时使用代码。

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

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

1 个答案: