4

我有一个小问题，搜索尚未产生任何结果。但它是不断出现的东西。

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

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

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

4

1 回答 1

3

这肯定是 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的部分，所以它看起来像一个错误。

我实际上对其进行了一些测试，是的，实际上有两个错误！我在 Sass 问题中填写了它们：https://github.com/nex3/sass/issues/1003和https://github.com/nex3/sass/issues/1004，所以你可以在他们需要的时候使用你的代码被固定。

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

于 2013-11-07T06:38:16.537 回答