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
1 2 3 | node -v npm -v |
1.2 Installing SASS
1 2 | 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.
1 2 3 4 5 6 7 8 9 | $primary__color: blue; $background__color: #f1f1f1; section { background-color: $background__color; h2 { color: $primary__color; } } |
To compile you go to the directory containing the file style.scss
, run this command.
1 2 | 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 package.json
1 2 | npm init |
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 .
1 2 | 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.
1 2 3 4 | "scripts": { "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
1 2 | 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 .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="stylesheet" href="./css/style.css" /> </head> <body> <h1 class="title">Hello world! I'm comming</h1> </body> </html> |
Here are the results!
Thank you for going with HoaL . Bye, see you next time !