Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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.

@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

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.

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

3 Answers

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

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

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.