How to add SCSS to your HTML project
Hi, in this video, I am going to show you how you can add Sass to your HTML project.
We are gonna be using a newer syntax called SCSS.
Since we will be using NPM, which is a 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 download Node by following the instructions for your operating system.
The IDE that we are gonna be using is Visual Studio Code.
If you don't have it installed, you can find it here: https://code.visualstudio.com/download
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 "container",
a div with a class "row" inside of it,
and finally a simple "Hello world" heading.
We will also link the CSS stylesheet that is
going to be generated later once when we set up
the Sass preprocessor.
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 when 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 gonna
serve our website. The website is opened in a browser.
Now let's prepare a folder structure for our styles, and create our first style.scss file.
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 a command node --version.
Now let's install Sass for our project:
Run this command:
npm install node-sass in our current directory.
This will create package.json and package-lock.json files for your project with default config.
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 resides,
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.scss now and add the styling.
We will use a feature called nesting. So we want to target the h1 inside of the div with a class 'row'.
First, we start from the container, we target the row, and finally our h1. Let's just change the color 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