Difference between SAAS And SCSS styling

CSS stands for cascading style sheet. CSS is a style sheet language. Three-way to embed CSS in our web page. inline CSS, internal CSS, or external CSS. Most of the time we used external CSS. 
Sass stands for Syntactically Awesome StyleSheets. Sass is a PreProcessor / Extension of CSS. Sass(.scss) files are compiled to regular CSS. SCSS And SASS both are different.

    SCSS 
    1. SCSS syntax is similar to CSS
    2. it uses {} curly brackets.
    3. it use ; semicolons.
    4. scss file extension is .scss
    5. Strict identation are not used.
    6. All css3 properties are supported by Scss.
    
    SASS
    1. sass syntax is similar to Ruby
    2. No curly Brackets used in sass.
    3. No ; semicolons are used in sass.
    4. Strict indentation is used.
    5. sass file extension is sass
    6. Not All css3 properties are supported by sass
    
   Example of SCSS
   
    $blue: #3ccfce;
    $margin: 16px;

    .content-navigation {
      border-color: $blue;
      color: darken($blue, 9%);
    }

    .border {
      padding: $margin / 2; margin: $margin / 2; border-color: $blue;
    }

   Example of SASS
    $blue: #3ccfce
    $margin: 16px

    .content-navigation
      border-color: $blue
      color: darken($blue, 9%)

    .border
      padding: $margin / 2
      margin: $margin / 2
      border-color: $blue
   
   After compilation of SCSS and SASS 
   
       .content-navigation {
           border-color: #3bbfce;
           color: #2b9eab;
    }

    .border {
          padding: 8px;
         margin: 8px;
         border-color: #3ccfce;
    }