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

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.


Most Read

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

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
IN Operator in PostgreSQLPostgresHow to Write Complex Search Queries in SQL?SQL/MySQLThe actual difference between indexOf() and search() in JavaScriptJavaScriptCan we execute conditions in SQL?SQL/MySQLHow to use HTML picture Tag?HTMLLearn to make a responsive gallery using CSS Grid and without media queriesCSS