SASS @ at-root不能編譯爲'，'

Question

Im'試圖使用@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 ..] 
      } 
     } 
    } 
}