We are going to be using a newer syntax called SCSS.
The IDE that we are going to be using is Visual Studio Code.
If you don’t have it installed, you can find it here: visualstudio
Project Configuration
Since we will be using NPM, which is the default Node package manager, we need to install Node.js first. You don’t have to worry about these terms now; we just need them to set up our tooling.
Go to https://nodejs.org/en/ and follow the instructions for your operating system to download Node.
Create a project.
Now, open VS Code, click File, Open, and choose or create a new folder for your project.
We are going to start by creating a basic setup for our website.
Let’s add an index.html file first.
We will add some basic structure here. A div with a class of “container,” a div with a class “row” inside of it, and finally, a simple “Hello world” heading. We will also link the CSS stylesheet, which is going to be generated later once we set up the Sass preprocessor.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<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>html</title>
<link rel="icon" href="assets/images/favicon.png" sizes="32x32" type="image/png">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<h1>hello world</h1>
</div>
</div>
</body>
</html>Install the live server in Visual Studio Code.
We will install an extension called Live Server in order to be able to serve our website and access it in the browser.
Click on the Extensions icon on the left and search for “live server.” Click install.
Now that the installation is over, we can close this window. In the bottom right corner, you should be able to see the “Go Live” button. This will start a simple server that’s going
serve our website. The website is opened in a browser.
Folder Organization
Now let’s prepare a folder structure for our styles and create our first style. scss file.
Install Node and NPM
Once you’ve done that, click on the Terminal option from the main menu and choose “New Terminal.” Make sure that you’ve installed Node and NPM correctly by typing the command node –version.
Now let’s install Sass for our project: Run this command: npm install node-sass in our current directory.
Update Package.json
This will create package.json and package-lock.json files for your project with the default configuration.
We will create a simple watcher script so that whenever we change our.scss file, it gets compiled into the CSS.
We go to the package.json file and add another field called “scripts” above the “dependencies.”
Our script name is going to be “watch:scss.”
We start by defining a node-sass binary, then -w, followed by the path where our scss file is located, and then we specify where we want our output to be, which is our generated CSS.
"scripts": {
"watch:sass": "node-sass -w styles/scss/style.scss styles/css/style.css --output-style compressed"
}
Now go to the terminal and type node run watch:sass. This will start a watcher script.
Let’s open up the style. CSS now and add the styling.
Now launch and test your browser.
We will use a feature called nesting. So we want to target the h1 inside of the div with a class.
We begin with the container, then move on to the row, and finally to our h1. Let’s just change the colour to navy.
Hit Save (CTRL + S on Windows, CMD + S on Mac), and look, our CSS has been generated.
If we go back to our browser, we will see that the live server has detected our changes and the h1 has changed its color.
So this is how you can add SCSS to your HTML projects. download here