- Tram Ho
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
1.2 Installing SASS
npm install -g 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.
sass style.scss style.css
As a result, it will create two new files, style.css and style.css.map
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
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 .
npm install node-sass
Okay, after running, the directory structure will look like the image below.
B3: Now you go into the file
package.json find and replace the code below.
"scss": "node-sass --watch style.scss -o css"
Once replaced, it will look like this.
Finally, if you want to compile automatically, run this command
npm run scss
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 .
<meta charset="utf-8" />
content="width=device-width, initial-scale=1, shrink-to-fit=no"
<link rel="stylesheet" href="./css/style.css" />
<h1 class="title">Hello world! I'm comming</h1>
Here are the results!
Thank you for going with HoaL . Bye, see you next time !