Install SCSS environment

Tram Ho

1. Settings

1.1. Install nodejs

B1: You just need to go to the link below to select download, then next, next to run it LINK

B2: You check the version, to see if the installation is ok

image.png

1.2 Installing SASS

OKE, that’s it, the environment is done!

2. Compiling SCSS to CSS

Create 1 file scss style.scss content like the code below.

To compile you go to the directory containing the file style.scss, run this command.

As a result, it will create two new files, style.css and style.css.map

image.png

There is a problem in the css, after the code is finished, just save the file and reload the page, but now I want to automatically save it? I like your question?

It’s too simple, I install npm in the directory SCSS (because I created the folder name is SCSS hey, you can name whatever you want)

3. Install SCSS in npm project

B1: Run the following command, it will create the file package.json

B2: Install the package node-sass, run the following command. Some of you will ask, part 1.2 has already installed sass, but now I have to install it again tới, at this point, I’m a bit sorry, because I made you do Part 2 mình, I just want you to understand better. is that scss will render the code written about css. And I use this node-sass, it automatically renders for me .

Okay, after running, the directory structure will look like the image below.

image.png

B3: Now you go into the file package.json find and replace the code below.

Once replaced, it will look like this.

image.png

Finally, if you want to compile automatically, run this command

Ok, now want to test it, create an html file, link to the file /css/style.css generated when you run the line up npm run scss done. Okay now you, edit the scss, then save it, it will automatically change. Enjoy it .

Here are the results!

image.png

Thank you for going with HoaL . Bye, see you next time !

Share the news now