在SASS中输入＆符号运算符输出中的类

Question

原帖

我需要在＆amp;内注入一个特殊的类。运算符输出字符串..我无法按预期工作：/

如果section1元素有另一个类，我需要更改颜色值。所以我就是这样..

.small {
  // stuff ..
  .section1{
    // stuff ..
    // Multiple nesting levels ..
    #menu{
      color:#fff;
        @at-root selector-replace( &, '.section1', #{'.section1.$active-state'} ){
           color:red;
        }
    }
  }
}

当我尝试编译此代码段时出现以下错误：

“selector-replace”后的无效CSS：期望的选择器，是“（＆amp;，...”

这让我疯狂了几个小时..有人能帮我理解这里出了什么问题吗？

__

修改

之前的代码是我实际代码和问题的简化版本。似乎应该修复前一个片段并不能解决我的问题，但会产生副作用..

所以现在这是我的问题..给这个代码..

以下是代码：

$small-mode:'.small-mode';
$menu-active-state:'menu-active';
    #{$small-mode} {
        #main-menu {
            padding:0px;

            #menu-button-container{
                height:25px;
                width:30px;
                padding:7px;
                background-color: #fff;
                .menu-trigger {
                    height: 25px;
                }

            }
            > ul{
                display: none;
            }
            #fp-nav{
                left:12px;
            }

            @at-root #{selector-replace( &, '#main-menu', '.#{$menu-active-state} #main-menu') } {
            /*! ~~ */
                height:1%;
            }
        }
}

“@at-root”输出

.small-mode .menu-active #main-menu,.menu-active .small-mode #main-menu

而不是

.small-mode .menu-active #main-menu

我差不多了，但是打印了一个逗号后跟一个意外的选择器

谢谢。