What is the difference between SCSS and SASS ?

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 SAAS 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.
  • SAAS file extension is .sass and SCSS file extension is .scss.
  • SASS has more developer community and support than SCSS.

SAAS Example

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Outout CSS

body {
  background-color: green;
  color: red;
  font-size: 25px;
}
/* now this can apply resulting html file */
SCSS Example:
filter_none
edit close
play_arrow
link brightness_4 code
/* SCSS */
  
$primary-color: green;
$primary-bg: red;
  
body {
  color: $primary-color;
  background: $primary-bg;
}
chevron_right

Outout CSS

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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.