Is there a difference between SCSS and Sass?

SCSS and Sass has gained a lot of momentum in last decade and why not, it makes the CSS code writing way easier.

Here are their all GitHub repos: Sass on GitHub

Sass supports two slightly different syntaxes. One of them is called SCSS and other one is Sass.

Since the main difference is in syntaxes, it’s up to you which syntax you’re comfortable with. Whether you want to write with curly braces {} or without it. Each of the syntaxes can load another one as well.

SCSS

SCSS files have an extension of .scss and you have to compile it in CSS to be applied on the frontend side.

SCSS is more popular since it’s more link CSS but with a soft tough of HTML! When I say a soft touch of HTML, what I mean is that it has the nesting of element styles — just like nesting of HTML tags.

SCSS is a superset of CSS.

That means, you can literally write exact same CSS code (with curly braces { }) in SCSS and it will work!

That’s the reason it got so much popular since it makes the transition from CSS to SCSS easier and more fun.

Here’s how simple SCSS code looks like:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

The same code in CSS after compiling:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

That’s exactly what I love about SCSS, the nesting part! and that’s not all.

Sass

Sass files have an extension of .sass and you have to compile it in CSS to be applied on the frontend side.

Sass syntax is indented and without the curly braces. This was the original syntax they came up with and gave the file .sass extension.

What’s the difference then?

SCSS and Sass files are very similar other than the fact that Sass files don’t have the curly braces or the semicolons(;) at the end of each line.

So, the basic difference is the formatting of the document.

Sass file auto detects the end of the line and adds the semicolon when it compiles into CSS. Same way, the indented syntax helps Sass understand the curly braces.

Look at the same code from SCSS above converted into Sass:

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

There are also some more differences in the Sass indented syntax. Take a look at Sass’s documentation.

Share this post