CODEWITHSUNDEEP
csssasscompass-sass
Kenneth Lynne
Kenneth Lynne

Reputation: 15579

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

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?

Upvotes: 8

Views: 6092

Answers (2)

Kyle Weller
Kyle Weller

Reputation: 2623

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
}

Upvotes: 5

Homme Zwaagstra
Homme Zwaagstra

Reputation: 12983

sass-convert should meet your needs:

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

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

 }
 //Content c
}

Upvotes: 3

Related Questions