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

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to retrieve homepage URL in WordPress?WordPressFETCH clause in PostgreSQLPostgresHow to set opacity or transparency using CSS?CSSConfiguring Modules with @forward rule in SCSS (Sass)SCSSHow to switch dark and light themes using pure CSS?CSSHow to use images instead of HTML radio buttons using CSS?CSS