How to start using SASS for CSS in your Node.js Web App in less than 5 minutes.
SASS is an excellent tool for web designers to organize and output amazing sites. This article is less about what it is and why to use it and more about how to get it up and running, in less than 5 minutes.
What you need
- terminal running on a mac (you can probably figure it out on linux or windows easy — that’s out of scope for my 5 min. article though.
- A fresh node.js project.
- A code editor ex: vs code, atom or sublime text
- gulp: `npm install — global gulp-cli` (if that gives you any trouble, visit their docs here: https://gulpjs.com/docs/en/getting-started/quick-start/)
Start your timers!
We’re going to get you up and running in less than 5 minutes.
…. aaaaaaaannnnnnnnddddd GO!!!!
- Open your terminal tab and cd to the root folder of your project, then install node-sass with the following code.
npm install node-sass2. Don’t worry about importing it, node-sass doesn’t need any importing of node-sass from you. (yes, I wrote that sassy on purpose.)
3. Make your input folder and initial files
// In terminal from your root project folder:
mkdir scss && cd scss
touch index.scss//optional: build scss partials to include in your index.scss, sass will automatically add all the files together when it runs. touch _colors.scss _layout.scss _forms.scss
then, in your scss/index.scss include those partials like:
@import '_colors';
@import '_layout';
@import '_forms';
4. Make your output folder and initial file
//in terminal for input from root
(assuming you have a public static folder for your app)mkdir public/css
touch public/css/style.css
5. Go to your html solution and add a link to your css output file.
The following works from my static declared public/root — even though I use EJS templates for my view engine — whatever your solution get this in your <head> tag section of your html, make sure your path is set correctly.
<link rel="stylesheet" href="./css/style.css"> 6. setup your watch code from the root in terminal (this has to be done every session)
sass --watch scss/index.scss:public/css/style.css7. CONGRATS! You use SASS NOW!
One rule for those new to SASS/SCSS, don’t ever edit your public/css/style.css file. ever, ever, ever. please, never do that.
From now on I want you to edit only your .scss files, every time you open your project run the command shown above in Step 6 from the project root and simply change either your input file (index.scss)— or one of the partial include files (if you choose to use that _partial.scss setup). Any change you make will cause SASS to fire off whenever you file save your scss files and it will rebuild all partials into your output style.css file automatically. Cool, huh!? It also gives you a .map file of your output .css — this helps support reviewing your css as a normal file in the chrome developer tools.
8. Now learn about how to write SASS code beyond typical css like using variables, nested scss code, math operators and mixins, then get to SASSin’ !
An article with some good further reading:
https://tutorialzine.com/2016/01/learn-sass-in-15-minutes
Official SASS Site:
http://sass-lang.com/
;) you’re welcome.
