Writing less CSS With Sass

Write less CSS with Sass.

I’ve mentioned it once or twice I believe, but Sass is totally kick ass for writing less CSS.

Take this for example:

@mixin sexy-border($radius: 4px) {
  border: 1px solid #000;
  border-radius: $radius;
}

.news_post {
  @include sexy-border(6px);
  padding: 5px;
}

Once processed, it will be:

.news_post {
  border: 1px solid #000;
  border-radius: 6px;
  padding: 5px;
}

That’s nothing compared to this:

.news_post {
  h2 {
    font-size: 20px;
  }
  .meta {
    font-size: 10px;
  }
}

Becoming this:

.news_post .h2 {
  font-size: 20px;
}
.news_post .meta {
  font-size: 10px;
}

Sass helps write CSS faster by reducing the amount you need to write.