Skip to content
Related Articles

Related Articles

What is the difference between SCSS and SASS ?
  • Last Updated : 25 Jan, 2021
GeeksforGeeks - Summer Carnival Banner

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax. It makes use of semicolons and brackets like CSS (Cascaded Style Sheets).
SASS and SCSS can import each other. Sass actually makes CSS more powerful with math and variable support. 
Let’s list down the main difference between SASS and SCSS. 
 

  • SASS is used when we need a original syntax, code syntax is not required for SCSS.
  • SASS follows strict indentation, SCSS has no strict indentation.
  • SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS style and use of semicolons and braces are mandatory.
  • SASS file extension is .sass and SCSS file extension is .scss.
  • SASS has more developer community and support than SCSS.

SCSS Example: 
 

SCSS




/* .scss file */
$bgcolor: blue;
$textcolor: red;
$fontsize: 25px;
  
/* Use the variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

Outout CSS: 
 

body {
  background-color: green;
  color: red;
  font-size: 25px;
}
/* now this can apply resulting html file */

SASS Example: 

SASS




/* SASS */
  
$primary-color: green
$primary-bg: red
  
body 
  color: $primary-color
  background: $primary-bg

Outout CSS:

/* CSS */
body {
  color: green;
  background: red;
}

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :