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;

}