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.

The IDE that we are gonna be using is Visual Studio Code.

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.

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.

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.

We will create a simple watcher script so that whenever we change our scss file it gets compiled into the CSS.
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": {
}

Now go to the terminal and type node run watch:sass. This will start a watcher script.

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

Рекомендации по теме

Комментарии

Do you want me to create a full SCSS tutorial? Thanks for 16K 🎉❤🎉

developerthing

Thanku very much I almost watched every video on YouTube but not get a proper solution. All though your video was small but it was to the point again thank you ❤

Gypsydanger