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.
Before we start, here are some SASS projects that you can check out:
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". This will compile the SASS code to CSS. Then you can view your desired output in your browser.
If you want me to code any project or post any specific post, feel
free to DM me at IG @code.scientist or @codingtorque
If you have any doubts or any project ideas feel free to Contact
Us
Hope you find this post helpful💖
Follow us on Instagram for more projects like
this👨💻