Setting Up Sass: A complete guide for beginners

If you’re like me, you’ve worked with CSS long enough to ask yourself if there is something better, and you found Sass. Its nesting, variables, and mixins answer all of CSS’s shortcomings. So let’s get it set up! *Note: this is a walkthrough for setting up a JAMstack application i.e. a simple HTML, CSS, and JavaScript app without a front-end-framework.

1. 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.
2. 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.
3. 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.
4. Make your CSS file watch your Sass file. We want to set your style.css file to watch your sass file so that when you make changes to the sass file, it automatically builds the CSS in the style.css file. Remember, browsers can only read HTML, CSS, and Javascript so when we use other frameworks and libraries, they all need to be eventually converted into one of these three core languages. First, open your project in VScode. Then open your built-in VScode terminal, and run 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.
5. 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.
6. Enjoy the power of Sass!