Skip to content
Related Articles

Related Articles

Improve Article

What is the difference between CSS and SCSS ?

  • Difficulty Level : Easy
  • Last Updated : 30 Jul, 2021

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.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

My Personal Notes arrow_drop_up
Recommended Articles
Page :