What is Sass and it's features?

Sass: Sass stands for Syntactically Awesome Stylesheet. It's a CSS Pre-processor. Sass reduces repetition of CSS and therefore saves time. A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS. This process is called transpiling.

CSS preprocessor: A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax.

There are many useful features of SASS like variables, nested rules, mixins, imports, inheritance, built-in functions etc.

1.) Sass Variables:

$variablename: value;

Example: 

$myFont: Helvetica, sans-serif;

$myColor: red;

$myFontSize: 18px;

$myWidth: 680px;

body {

 font-family: $myFont;

 font-size: $myFontSize;

 color: $myColor;

}

2.) Sass Nested Rules:

nav {

 ul {

  margin: 0;

  padding: 0;

  list-style: none;

 }

 li {

  display: inline-block;

 }

 a {

  display: block;

  padding: 6px 12px;

  text-decoration: none;

 }

}

3.) Sass @import

Sass keeps the CSS code DRY (Don't Repeat Yourself). One way to write DRY code is to keep related code in separate files.

@import filename;

4.) Sass @mixin and @include

The @mixin directive lets you create CSS code that is to be reused throughout the website.

The @include directive is created to let you use (include) the mixin.

@mixin mixin-name {

 property: value;

 property: value;

 ...

}

selector {

 @include mixin-name;

}

Sass @extend and Inheritance:

The @extend directive lets you share a set of CSS properties from one selector to another. The @extend directive is useful if you have almost identically styled elements that only differ in some small details.

The @extend directive helps keep your Sass code very DRY.

Example:

.button-basic {

 border: none;

 padding: 15px 30px;

 text-align: center;

 font-size: 16px;

 cursor: pointer;

}

.button-report {

 @extend .button-basic;

 background-color: red;

}

.button-submit {

 @extend .button-basic;

 background-color: green;

 color: white;

}