SASS full form

SASS stands for Syntactically Awesome Style Sheets. It was designed by Hampton Catlin and developed by Natalie Weizenbaum. Sass is a CSS pre-processor. Sass reduces the repetition of CSS and hence saves time. It is a stylesheet language. It is completely compatible with all versions of CSS.

It is a language that allows you to write CSS in a more convenient and efficient way. There are two ways to write Sass, one is using SASS syntax and the other is SCSS syntax. It allows you to write DRY(Don’t Repeat Yourself) code so that the code will be faster, more efficient, and easier to maintain.

When to use SASS?
When stylesheets are larger, more complex, and harder to maintain then CSS pre-processor SASS can be used. SASS lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

Features of SASS:

• Sass is fully compatible with CSS.
• It is powerful than CSS.
• It is a superset of CSS.
• It compiles to readable CSS.
• It supports variables, nesting and mixins.

Example: CSS

//CSS
.header {
  width: 100%;
}
.header ul {
  padding: 30px;
}
.header ul li {
  font-size: 25px;
}
.header ul li.first {
  color: green;
  font-weight: bold;
}
.header ul li.sec {
  color: blue;
}

Example: SASS

//SASS
//The above css can be written in sass without repetition
.header
{
width:100%;
  ul{
    padding:30px;
    li{
      font-size:25px;
      &.first{
        color:green;
        font-weight:bold;
      }
      &.sec{
        color:blue;
      }
    }
  }
}

//html
<div class="header">
<ul>
<li class="first">SASS</li>
<li class="sec">SCSS</li>
</ul>
</div>

Output:

Merits of SASS:

• Less writing than CSS.
• Allows you to reuse code.

Demerits of SASS:

• Browsers don’t understand SASS so it has to be converted to CSS.
• Hard to troubleshoot.