- Install Node if you haven’t already. You’ll need Node or npm (node package manager) to install Sass. If you don’t have Node installed already, go to npmjs.com/get-npm and follow their instructions to install. They make it a breeze, I promise. Plus, installing Node now will save you time in the future.
- Use npm to globally install Sass. Now that you’ve installed Node, go to your terminal and run:
npm install -g sass. The -g flag stands for globally which means this is the only time you’ll have to run this command.
- Create your styling files. In your project directory, create a CSS file and a Sass file like so:
touch style.css style.sass. In your HTML, link only your style.css file, as you normally would in order to import styling.
sass -—watch style.sass:style.css*Note 1: alter this command to match your specific file names. *Note 2: watching the file is an ongoing action and will leave your terminal busy so It’s most convenient to run this in another terminal tab. This way, you can still use your terminal to run lite-server, etc.
- Install a code highlighter. This step isn’t required but super handy for those of us just starting out in Sass. A highlighter will give you a clearer understanding of whether or not you’ve written your syntax correctly and give you suggestions for styling options as you type. If you’ve never used Sass in VS code, or whatever text editor you are working in, chances are it doesn't have the built-in functionality to properly highlight your Sass file. To quickly change this go to VScode Preferences, Extensions, and search for “Sass.” You’ll find lots of great extensions to format your Sass code (I am using Syler.sass-indented). Click the green install button to install the extension globally in your VScode. Once it’s finished installing, your Sass file should be highlighted and ready to go.
- Enjoy the power of Sass!