First, I want to point out that this article is not a rage article about the SCSS syntax. I don't mind if you use the Sass or the SCSS syntax to achieve your daily goals. Anything that suits you, suits me. Damn, I'm even glad if you use Sass in general instead of writing old plain bad ass CSS code. I've met a lot people who don't even now about CSS pre-processors yet and I think that is a shame, because they give you a major productivity boost. If you are one of those people, stop reading now and follow this link here. After that, you can come back and read on if you want.

Recently, I often read about comments or blog post from people who prefer the SCSS syntax over the Sass syntax. Most of the time their reasons are that valid CSS is valid SCSS and you can simply copy and paste third party code into your SCSS file and its just going to work. Well that is true and makes the transition from plain CSS to SCSS most likely very easy. But I'm not a big fan of copy and paste code so this not an attribute I care about.

But Daniel, what do you do when you want to use third party extensions in your projects?

Well, I admit, I use SCSS. But only for that use case. I put it into my project, rename it to _plugin.css.scss or _plugin.scss and import it into my base stylesheet.

But when it comes down to writing Sass or SCSS code, Sass wins for me. And this post is going to show you why I personally prefer Sass over SCSS.

#1 - More readable syntax

This is probably the number one reason why most of the people (including me) prefer Sass over SCSS. All you have to care about in Sass is indention, you don't have to care about clumsy semicolons or curly braces which are going to bloat up your stylesheets like they would in SCSS.

Many could (and probably will) argue that SCSS will support you with writing better code because you actually see it when you have nested your code to deeply based on the curly braces in SCSS. Well if you're new to writing Sass code this is probably a good argument but after you got the hang out of it I don't think you really need that help any longer.

Another plus for me is, that the Sass syntax is more maintainable because of its easy to read syntax. But I'm not going to take the maintenance argument any further, because the syntax alone isn't the key to keep your stylesheets maintainable. More about that topic in the future.

#2 - Less code

Yes, I'm a lazy programmer. I don't like to repeat myself over and over again and writing stuff with a lot of characters when there is a way to write it with less. And this is the second reason I prefer Sass over SCSS. Lets take a look:

// SCSS
@include border-radius(10px);
// Sass
+border-radius(10px)

Okay, maybe someone can argue that this is basically the only thing where Sass has a shorter syntax. But again, don't forget about the semicolons and curly braces (the following example was taken from the sass-lang.com website):

// SCSS
table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}
// Sass
table.hl
  margin: 2em 0
  td.ln
    text-align: right

li
  font:
    family: serif
    weight: bold
    size: 1.2em

And I don't know nothing about you, but for me, this means I'm faster in writing CSS code, faster in finding and replacing existing CSS code, faster in fixing CSS bugs, and so on. Which means I can go home earlier than others and do stuff I care more about than a languages syntax.

#3 - Because I want to

Let me get this straight. Those are the reasons why I prefer Sass over SCSS. There are a lot of reasons why someone can and should use SCSS and from my experience it strongly depends on how you work and the project you're working on. I try to get my work done as fast as possible and I personally hate curly braces and semicolons (I also dislike Java and love Ruby). But the major productivity boost doesn't come from the Sass syntax itself. They come from the pre-processor features themselves and are covered in both syntaxes. But when you're a productivity freak like me, every second matters. This is probably also a reason why I mostly write Rails applications and use vim doing it. For me the Sass syntax just feels more like how writing stylesheets should be.

So my conclusion to this rather short article is probably that you should use both the Sass and the SCSS syntax. But in the end its just a question of taste and what you personally want to use (at least when nobody tells you what you have to use for a certain project).

This article are just my two cents to the discussion. Thanks for reading. If you want to take this any further hit me on Twitter: @danielpuglisi