有没有一种方法可以在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工具可用，或者我是否缺少最佳实践？

- Kenneth Lynne

---

嵌套选择器在Sass中不是必需的。重新排列样式应该手动完成，因为它会改变层叠顺序。 - cimmanon

如果你正在处理一个大型项目，为了方便起见，你应该为每个部分创建单独的SCSS文件，其中之一是避免重复选择器。请参阅http://sass-lang.com/tutorial.html中的`@import`。 - Iliya Reyzis

感谢你的回答。我的问题在于编写干净且易于维护的 SCSS。我想找到一种将选择器节点合并成优化层次结构的方法。当我需要将样式添加到样式表时，我希望按正确顺序编写多个级联样式，并使用整洁的 SCSS 工具将我的不同树合并成一个优化的树。目前似乎没有这样的工具。手动遍历层次结构以查找正确的选择器非常麻烦。 - Kenneth Lynne

Answer 1

我同意@cimmanon在你的问题上的评论，但如果你必须尝试this css2sass converter。

我给它的输入：

#left .menu 
{
     //Content a 
}

#left .menu span
{ 
     //Content b 
}

#left .menu 
{
     //Content c 
}

输出：

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

  }
  //Content c
}

- Kyle Weller

Answer 2

sass-convert是一个适合你需求的工具：

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

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

 }
 //Content c
}

- Homme Zwaagstra