YogeshChauhan . com

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 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

How to check if the page is single post page in WordPress?WordPressHow to add Laravel to WordPress using Sage theme (and install Tailwind CSS)?PHPHow to create Glowing Text using CSS?CSSWhat are Identifiers in JavaScript?JavaScriptHow to link/add CSS file to HTML Document?CSSWhat is Conditional Rendering in React?React