Why I prefer the SASS indented syntax over the SCSS syntax

Wouter Muller

5 min read

At almost every company I worked for, there has been a discussion about which SASS syntax to use. The older SASS syntax that is based on indentation, or the newer SCSS syntax, that is compatible with plain CSS. Both methods have their pro’s and cons and a lot of it is based on personal preference. However, I strongly feel that SASS is a better choice and here are my reasons why.

1. It looks cleaner and it is easier to read

Because SASS is based on indentation, it forces you to use proper indentation, which makes your code base very readable (VERY important imo). Especially when you work in a team with a lot of developers, this promotes the idea that the code looks as if it is written by one person, in other words, it is much easier to follow an agreed on coding style.

Also, cause you don’t have to use curly brackets and semi-colons (more on that later on), there is a lot less clutter, which makes it easier to focus on the parts that really matter.

2. Developing is faster

2a. No more curly brackets

This is a big one for me. The curly bracket even requires the use of the shift key in most, if not all, keyboard layouts. This may not seem like such a huge difference, but over time it certainly adds up to a significant amount of time.

Also, personally it just feels weird to have to add a character that can be added automatically. This is one of things that preprocessors are made for, they can make your life easier.

2b. No more semi-colons

Most of the reasons that apply to the curly bracket reason apply here too. But have you ever written SCSS or CSS and forgotten to add a semi-colon? Especially with CSS, this can lead to some unexpected results, cause the rules below the missing semi-colon line won’t be seen by the browser anymore. And it is not immediately clear what is causing it. So why even bother? This is what a preprocessor can do for you.

2c. Much shorter way of calling mixins (and placeholders)

What a lot of people don’t know, is that SASS also has a very short way of calling mixins and placeholders. In SCSS, when you want to use a mixin, you have to write the following:

@include mixin;

However, with SASS, you can just use the + character instead, so you only have to write:

+mixin

This also goes for SASS placeholders, you can type = instead of @extend.

3. It plays well with HAML

The SASS syntax is indentation-based just like HAML, so it plays very well with HAML. It even looks a bit like HAML, which some people use as a reason against SASS, as they claim developers that have never used the SASS syntax have a hard time getting used to how it looks and how to use it. Personally I think even the average newcomer could get used to this within a matter of hours, surely not longer. And once you get used to it, you can write code much faster.

This argument counts more in the Ruby world, where HAML is widely used.

Example of SASS vs. SCSS

Here are two code snippets that are identical (precompiled), one is written in SCSS and the other in SASS, so you can easily get a sense of the difference.

SCSS

.div-name {
    @extend %main-button-styles;
    @include font-size-l();

    .nested-element {
        line-height: 1.2;
    }

    @include mobile {
        line-height: 1.4;
    }
}

SASS:

.div-name
    =main-button-styles
    +font-size-l

    .nested-element
        line-height: 1.2

    +mobile
        line-height: 1.4

As you can see, the SCSS version is 12 lines long, whereas the SASS version is just 9 lines long.

In my opinion, the SASS version is much cleaner and easier to understand, which is essential if you care about a clean and readable code base.

But isn’t SCSS compatible with plain CSS?

Yes, one valid reason to choose for SCSS is that the syntax is compatible with plain CSS. Any valid CSS is automatically also valid SCSS. So let’s say you find a bit of CSS on a forum, then you can just copy/paste it into your own project without any problems.

This is true, but I have never felt this to be a disadvantage cause there are great converters available, and it doesn’t happen very often at all anymore that I have to copy/paste CSS from another source into my project. But for people who do this a lot, this may be a deal breaker.

TL;DR

The SASS syntax is shorter and easier to read, plus you can write code faster. If you haven’t used it before and you are starting on a new project, I would encourage you to try it out for yourself. It may just be one of those things that seem a bit weird at first, but once you’ve gotten used to it, you never want to go back.