Sass provides two distinct syntax:

  • Sass
  • SCSS

Both are similar and do same thing, but written in different style. SCSS is latest one and considered better than Sass.

Difference between SASS and SCSS

Sass: Sass is derived from another preprocessor known as Haml. It was designed and written by Ruby developers so, Sass stylesheets use Ruby like syntax with no braces, no semi-colons and a strict indentation. In Sass, the variable sign is ! instead of $ and assignment sign is = instead of :.

See this example:

  1.    
  2. // Variable  
  3. !primary-color= hotpink  
  4.   
  5. // Mixin  
  6. =border-radius(!radius)  
  7.     -webkit-border-radius= !radius  
  8.     -moz-border-radius= !radius  
  9.     border-radius= !radius  
  10.   
  11. .my-element  
  12.     color= !primary-color  
  13.     width= 100%  
  14.     overflow= hidden  
  15.   
  16. .my-other-element  
  17.     +border-radius(5px)  

SCSS: SCSS provides the CSS friendly syntax to closing the gap between Sass and CSS. SCSS is called Sassy CSS.

See this example:

  1. // Variable  
  2. $primary-color: hotpink;  
  3.   
  4. // Mixin  
  5. @mixin border-radius($radius) {  
  6.     -webkit-border-radius: $radius;  
  7.     -moz-border-radius: $radius;  
  8.     border-radius: $radius;  
  9. }  
  10.   
  11. .my-element {  
  12.     color: $primary-color;  
  13.     width: 100%;  
  14.     overflow: hidden;  
  15. }  
  16.   
  17. .my-other-element {  
  18.     @include border-radius(5px);  
  19. }  

Here, you can see that SCSS is definitely closer to CSS than Sass.

Advantage of Sass syntax:

he syntax of Sass is totally different from CSS but it is shorter and easier to type. You don't need to type semicolon or braces, even no need to use @mixin or @include, when a single character is enough: = and +.

It also provides clean coding standards because it follows indented syntax.

Advantage of SCSS syntax:

It is fully CSS compatible. You can rename a CSS file as .scss extension and it will also work. Due to the reason that it follows the syntax of CSS, makes it very easy to learn and work.