SASS @ at-root不会用＆＃39;编译，＆＃39;

Question

林＆＃39;尝试使用@at-root #{&}编译一些SASS代码，为共享同一父代的多个类指定多个样式。但代码不断返回一些错误。

这是我试图编译的代码：

header {
    [... exclusive for this class ..]
    .hd {
        @at-root #{&}_left {
            float:left;
            @at-root #{&}-logo,
            @at-root #{&}-search {
                height: $header-height;
                line-height: $header-height;
                vertical-align: middle;
            }
            @at-root #{&}-logo {
                [... exclusive for this class ..]
            }
            @at-root #{&}-search {
                [... exclusive for this class ..]
            }
        }
    }
}

由于@at-root #{&}-logo,，我使用此,时发生错误 这是错误消息：

"Error: Invalid CSS after \"... .hd_left-logo,\": expected selector, was \"@at-root header...\"

是否可以使用@at-root编译此代码？

Answer 1

@at-root指令需要有效的选择器。选择器不以逗号结尾。

header {
    [... exclusive for this class ..]
    .hd {
        @at-root #{&}_left {
            float:left;
            @at-root #{&}-logo, #{&}-search {
                height: $header-height;
                line-height: $header-height;
                vertical-align: middle;
            }
            @at-root #{&}-logo {
                [... exclusive for this class ..]
            }
            @at-root #{&}-search {
                [... exclusive for this class ..]
            }
        }
    }
}