Hello Guys! Welcome to Coding Torque. In this blog, I am going to explain you what is SASS and how to run a SASS with HTML in your VS Code.
SASS stands for Syntactically Awesome Style Sheets. It is compiled into ordinary CSS in our code.
SASS allows us to do more with CSS, like:
- create variables
- mixins
- nested CSS
- reuse CSS rules
- create loops
Now the following steps will show you how to run a SASS in your VS Code editor.
Step 1
Install the Live Sass Compiler extension.
Step 2
Create an HTML file with the name index.html and write the HTML code.
For example:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>How to use SASS in HTML - @codingtorque</title> </head> <body> <h1>Coding Torque</h1> </body> </html>
Step 3
Create a .scss file at the same root level as your HTML file and name it style.scss which is our SASS file.
Step 4
Then add the SASS code to the style.scss file.
For example:
$skyblue-bg : deepskyblue; h1{ background-color: $skyblue-bg; }
Step 5
Add the following code to the <head> tag of the HTML file.
<link rel="stylesheet" href="index.css">
The extension we have installed will compile the index.scss (SASS) file into CSS and store the compiled code in a new CSS file named index.css. That is why we have imported the index.css file in the code above.
Step 6
Now, start the compiler by clicking on “watch my sass” in vscode. This will compile the SASS code to CSS. Then you can view your desired output in your browser.
Written by: Piyush Patil
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖