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

Question

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?

Answer 1

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
}

Answer 2

sass-convert should meet your needs:

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

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

 }
 //Content c
}