Yogesh Chauhan's Blog

Is there a difference between SCSS and Sass?

in SCSS on April 22, 2021

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 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 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:

    margin: 0
    padding: 0
    list-style: none

    display: inline-block

    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.

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Flash of Invisible Text and Mitt Romney Web Font ProblemCSSHow to create a cross-browser smooth scrolling with jQuery?jQueryAdvanced nesting in Sass (SCSS) using at-rootSCSSHow to use a Subquery to Insert Multiple Rows in SQL Table?SQL/MySQLHow to hide a DIV on clicks outside of it using jQuery?jQueryJavaScript Input Validation Theme Park Example using throw StatementJavaScript