有沒有辦法在 SASS 樣式表中組合和優化選擇器？

Question

有沒有什么好的做法或工具可以合並類似的選擇器和優化 SCSS 源？

例如有這個：

#left .menu 
{
     //Content a 
}

#left .menu span
{
     //Content b 
}

#left .menu 
{
     //Content c 
}

變成這樣：

#left .menu 
{
     //Content a
     //Content c 

     span
     {
          //Content b 
     }

}

手動執行此操作很乏味，尤其是對於結構可能不那么明顯的較大樣式表。 可以付出更多努力來編寫更精簡、更干凈的 SCSS，但它應該是一些整潔的 SCSS 工具，或者是否有我遺漏的最佳實踐？

Answer 1

我同意@cimmanon 對您的問題的評論，但如果必須，請嘗試使用此 css2sass 轉換器。

我給它的輸入：

#left .menu 
{
     //Content a 
}

#left .menu span
{ 
     //Content b 
}

#left .menu 
{
     //Content c 
}

輸出：

#left .menu {
  //Content a
  span {
    //Content b

  }
  //Content c
}

Answer 2

sass-convert應該可以滿足您的需求：

$ sass-convert --to scss your-example.css

#left .menu {
  //Content a
  span {
    //Content b

 }
 //Content c
}