**SASS (Syntactically Awesome Style Sheets)** is an extended version of CSS. It enables a developer to create code in another language and translate it into `CSS`, and it compiles SASS to CSS at an incredible speed. It has introduced various new features like:

* nesting
* data variables
* mixin functions 
* and many more!

> Two syntaxes are available for SASS; the newer one uses the `.scss` extension and the older one uses the `.sass` extension.

# Converting SASS into CSS

It is very easy to convert an `scss` file into a `css` file using this command on the terminal.

```
sass myStyle.scss myStyle.css
```
> Remember: You need to install node-sass on your operating system.


# Nesting

Nesting,  where we can define CSS rules inside another rule, is introduced in this version.


// css rule for paragraph <p> is
// nested in <div>
div {
    color: red ;
    p {
        color: green;
    }
}

<html>
 <head>
 </head>
 <body>
   <div>
     Educative
     <p>Welcome to Educative!</p>
   </div>
 </body>
</html>

codemirror

## Data Variables

Variables are also introduced for storing specific values. Variables are declared after the `$` symbol.

// clr variable to store color
$clr: green;

div {
    color: red ;
    p {
        color: $clr;
    }
}

# Mixin functions

Mixin functions are used to store a certain set of reusable CSS rules.

## Syntax

@mixin clr {
   color: green; 
}
div {
    color: red ;
    p {
        @include clr();
    }
}

## Data Variables

Variables are also introduced for storing specific values. Variables are declared after the `＄` symbol.

What is node-sass?

Converting SASS into CSS

Nesting

Data Variables

Mixin functions

Syntax