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

filter_none

edit
close

play_arrow

link
brightness_4
code

//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;
}

chevron_right


Example: SASS

filter_none

edit
close

play_arrow

link
brightness_4
code

//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;
      }
    }
  }
}

chevron_right


filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.



My Personal Notes arrow_drop_up

Recommended Posts: