SCSS vs. SASS

Have you ever wondered why the file extension for Sass is .scss? I have. It never made sense to me why the file extension was just one letter off. Did someone make a mistake that just never got fixed? Did they want to be different from the other big css pre-compiler, Less, whose file extension is .less?

Well, for those of you who are like me and have wondered about this rather trivial piece of information, I now know why the file extension for Sass is .scss. There are actually two different file extensions you can use with sass, one being .sass and the other being .scss. In the beginning of Sass, there was only one file extension: .sass. When using this file extension, you don't put curly braces after your selectors, and indenting of the properties is enforced, like so:

h1
    margin-top: 15px;
    font-size: 40px;

This creates a bit of a barrier to entry because those who are used to css have to get into the habit of not including curly braces and making sure they indent. Therefore, a new file extension, .scss, was born. When using .scss, the syntax is the same as normal css, but with the added benefit of the features of sass:

h1 {
    @extend .heading;
    margin: {
        top: 15px;
    }
    font: {
        size: 40px;
    }
}

The .scss file extension stands for "sassy css" because it behaves like css, but has all the features of Sass. Because most developers are already familiar with css syntax, it's much more common to see the .scss extension, so much so that I didn't even know the .sass file extension existed. A great mystery has now been solved!