Is there a way to combine and optimize selectors in SASS stylesheets?

compass-sass, css, sass

Solution

I would agree with the comment by @cimmanon on your question, but if you must, try this css2sass converter.

The input I gave it:

#left .menu 
{
     //Content a 
}

#left .menu span
{ 
     //Content b 
}

#left .menu 
{
     //Content c 
}

The output:

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

  }
  //Content c
}

Problem

Is there any good practices or tools for merging similar selectors and optimizing SCSS source? For example having this: ``` #left .menu { //Content a } #left .menu span { //Content b } #left .menu { //Content c } ``` Turn into this: ``` #left .menu { //Content a //Content c span { //Content b } } ``` It's tedious to do this by hand, especially for larger stylesheets where the structure might not be so apparent. One could put more effort into writing leaner and cleaner SCSS, but it should be some tidy SCSS tool out there, or is there a best practice I'm missing?

Original source