**SASS** stands for **Syntactically Awesome Style Sheets**. It is mainly compiled to ordinary #key# CSS: Cascade Style Sheets #key# in your code. 

SASS allows you to do more with CSS, such as: 

- create variables
- mixins
- nest CSS
- create loops
- reuse CSS rules

##
### How to use SASS in your HTML

The following steps tell you how to run SASS in your Visual Studio Code editor. An example of how to style a ``: paragraph element is given later on.

###
#### Step 1
Install the `Live Sass Compiler` extension in the browser's extension bar. 
> [Here](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass) is a link to the Live Sass Compiler extension.

###
#### Step 2

Create your HTML file and name it `index.html`. Include the `` element that we want to style with SASS.

---
> Please note that browsers do not recognize SASS, so a compiler needs to compile it to CSS.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SASS in HTML</title>
</head>
<body>
 This is SASS in HTML
</body>
</html>

codemirror

###
#### Step 3 

Create a `.scss` file at the same root level as your `index.html` file and name it `index.scss`. This is our SASS file.
 
## 
### 
#### Step 4
Lastly, add the following code that will style your `` element.

$red-bg : red;
p{
    background-color: $red-bg;
}

Based on the code above, we want to give our `` element a red background color.

###
#### Step 5

Add the following to the `<head>` tag of your HTML file.

---
```
<link rel="stylesheet" href="index.css">
```

The extension we installed will compile the SASS file `index.scss` into CSS and store the compiled code in a new CSS file, also called `index.css`. This is the reason for the code above, `href = "index.css"`.

###
#### Step 6

Now, to start the compiler, click "Run". This will compile the SASS code to CSS.

$red-bg : red;
p{
    background-color: $red-bg;
}

How to use SASS in your HTML code

How to use SASS in your HTML

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6