Difference between SAAS And SCSS styling

Posted By :Pawan Singh Nagarkoti |23rd May 2022

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.

    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.
    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

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

      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;

About Author

Pawan Singh Nagarkoti

Pawan is a highly skilled Frontend Developer with extensive experience in the industry. He stays up-to-date with the latest technologies, including Angular, JavaScript, React JS, HTML5, and CSS3. He has contributed to a diverse range of projects, including Konfer, KRB and Microsite (chatbot and ChatGPT). He consistently strives for excellence and delivers exceptional results in his work. He is passionate about exploring the internet and staying informed about the latest advancements in the ever-evolving world of technology. Pawan's commitment to continuous learning enables him to stay at the forefront of his field and deliver innovative solutions to his clients.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us