SASS doesn’t merge selectors or styles

Something I came across just now: SASS doesn’t combine similar styles or even selectors. I made a few simple styles and wanted to see what SASS would make of it.

$blue: blue;

.foo {
  color: #007;
}
.foo {
  padding: 10px;
}
.foo {
  margin: 10px;
}
.foo_too {
  color: $blue;
}
.foo_boo {
  color: blue;
}
.foo_doh {
  color: #007;
}

$blue: blue;

.bar {
  color: #700;
}
.bar_too {
  color: $blue;
}
.bar_boo {
  color: blue;
}
.bar_doh {
  color: #700;
}

.foo{color:#007}.foo{padding:10px}.foo{margin:10px}.foo_too{color:blue}.foo_boo{color:blue}.foo_doh{color:#007}.bar{color:#700}.bar_too{color:blue}.bar_boo{color:blue}.bar_doh{color:#700}

As you can see, it didn’t do much of anything really. The styles are duplicate and the selectors are duplicate. I searched the interwebs a bit and found it might actually be a philosophical decision not to respond to this. SASS is meant for SASS, so write SASS code and write it clean. It seems like the easy way out, but in a way it makes sense.

If you don’t have too much variables (like the $blue I have at the top of my examples), mixins and extends, you can try converting your CSS to SASS on this page: http://css2sass.herokuapp.com/ or use the sass-convert command. They both run a nesting procedure for the generated output. 🙂