What is the difference between CSS and SCSS ?

Introduction

  • CSS : Cascading Style Sheet is the basically the scripting language. CSS is used for designing web pages.
    CSS is the most important web technologies that are widely used along with HTML and JavaScript. CSS have file extension of .css.
  • SCSS : Syntactically Awesome Style Sheet is the superset of CSS. SCSS is the more advanced version of CSS. SCSS was designed by Hampton Catlin and was developed by Chris Eppstein and Natalie Weizenbaum. Due to its advanced features it is often termed as Sassy CSS. SCSS have file extension of .scss.

Differences:

  1. SCSS contains all the features of CSS and contains more features that are not present in CSS which makes it a good choice for developers to use it.
  2. SCSS is full of advanced features.
  3. SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional CSS.
    • Example: In CSS



      body{
       color: #ffffff;
       font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
       font-size: xx-large;
       padding: 2rem;
      }
      

      Output:

    • In SCSS
      $white: #ffffff;
      $ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
      
      body{
       color: $white;
       font: $ubuntu-font;
       font-size: xx-large;
       padding: 2rem;
      }
      

      Output:

  4. Knowing SCSS helps you to customize Bootstrap 4.
  5. SASS adds the feature of @import which lets you import your customized SCSS files.
    Example:

    @import "my theme";
    @import "framework/bootstrap";
    
  6. SASS allows us to use nested syntax. Let’s say if you have to style a specific ‘paragraph’ in ‘div’ in ‘footer’ you can definitely do that by SASS.
    Example:

    footer {
        div {
            p {
                margin: 2rem;
                color: #2f2f2f;
            }
        }
    }
    
  7. At last, what makes SASS a good option to use is that it is well documented.


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.