Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Michael Ntambazi
Michael Ntambazi
Courses Plus Student 201 Points

How to merge duplicated CSS code.

While using Sass, the generated CSS file does have a lot of duplicated code. Is there a tool that can be used to merge the code into one or does Sass have a feature to merge duplicated code in its outputted file?

For example

The outputted main.css file from a main.scss looks like this

column.full {
  float: left;
  width: 100%; }

row.half {
  float: left;
  width: 50%; }

column.two_thirds {
  float: left;
  width: 66.7%; }

left_sidebar {
  float: left;
  width: 33.7%; }

column.fourth {
  float: left;
  width: 25%; }

Which tool can be used to merge the duplicated code in the main.css file into something like this below?

column.full {
  width: 100%; }

row.half {
  width: 50%; }

column.two_thirds {
  width: 66.7%; }

left_sidebar {
  width: 33.7%; }

column.fourth {
  width: 25%; }

column.full, row.half, column.two_thirds, left_sidebar, column.fourth {
  float:left;
}
Valery Kukatov
Valery Kukatov
6,996 Points
Valery Kukatov
Valery Kukatov
6,996 Points

Why not just make 

column{
float:left;
}

Of course only if you want all your columns to float left, haha. That's just my comment. I have no real answer to help with the program.

Michael Ntambazi
Michael Ntambazi
Courses Plus Student 201 Points

@Valery you are right about that but assuming those were all different classes but all had one css rule in common, float: left; How can I over come duplication?

Valery Kukatov
Valery Kukatov
6,996 Points
Valery Kukatov
Valery Kukatov
6,996 Points

Then you would probably just attach float: left; to the body content. So it would be 

body{
float:left;
}

I'm probably not helping out though haha. Sorry man.

Michael Ntambazi
Michael Ntambazi
Courses Plus Student 201 Points

Hahaha! Its okay man. Maybe someone else will help me out.

3 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That's not what Sass is for, you shouldn't be concerned with the CSS that your preprocessor output. One of the most important reasons to write DRY code is for humans that read it. Sass doesn't output CSS for humans but for web browsers.

Once you minify your CSS the file size savings from tweaking your CSS selectors is an area of diminishing returns and what is known as a micro-optimization and best practice is to avoid micro-optimizations in favor of spending time on something that will have a bigger impact.

Ricardo Diaz
Ricardo Diaz
30,415 Points
Ricardo Diaz
Ricardo Diaz
30,415 Points

I don't know of any tool that can do that but in the scss file you would just do it manually as you write the code. Most of the time you would see duplicated code like that and just remove it and add them all into one like you did above.

Jose Ortiz
PLUS
Jose Ortiz
Courses Plus Student 6,161 Points
Jose Ortiz
Jose Ortiz
Courses Plus Student 6,161 Points

column.full, row.half, column.two_thirds, left_sidebar, column.fourth { float:left; } should be correct http://csscreator.com/node/11989 but I think for readability the original way is best.