How to Install and Run Sass
If you know what a pre-processor is, you can skip this part. But if you’ve googled “how to install Sass” and are perplexed as to all the options, this is a great place to start. Let's break down how to install and run Sass.
How to Install and Run Sass
Sass is a pre-processor. Yeah, yeah. We know. But what does that actually mean?
Unlike other coding languages (HTML, CSS, Javascript), Sass is not read by your browser. I can create a folder on my desktop, type up some good ol’ fashioned HTML and CSS (JS if I’m feeling fancy), open that folder in any browser, and my code will appear as a page. The browser is able to read my file, decipher it, and display it.
Not with Sass. If I try to code directly in Sass I’m hit with a couple of problems. How do I link my .html file to my stylesheet? Why can’t I nest items? The list goes on. Well, here’s the deal folks:
Sass is a time saving tool, made for you, the badass coder.
Once you use it, it’s really hard to go back. But it can be a real pain to set up.
Why Should you Use Sass?
If your hands have gone numb from rewriting the same CSS classes over and over again... You’ve likely wished for a better solution that doesn’t require all the repetition. The biggest advantage (in my opinion) is the nesting capability. This, combined with the ability to use variables and mixins is a HUGE time saver. Not to mention, Sass drastically improves code legibility.
How does Sass Work?
Sass is specifically a language created to make CSS faster and easier. You can write in Sass all day long, but you’ll need to compile it before you can use it on the web. Here’s how it works:
You write code in Sass > You put it through a compiler > Compiler translates it to a readable CSS file > You link said CSS file to your HTML doc.
It’s that simple folks. Now let’s get started on setting it up.
There are lots of different ways to compile Sass, but for the purposes of this tutorial, we’re going to be focusing on ONE method to do this. And it’s free!
There are 3 main ways to do this:
- Add an extension to your coding editor (Recommended)
- Install on your computer and use your terminal
- Use a third-party tool like Koala or find an online Sass compiler. You can google "Sass compiler" and find what you need there. It's not a good long-term solution but is helpful in a pinch sometimes.
How to Install Sass for Mac
There are plenty of tutorials online for using Sass via your computer's Terminal or command line using Ruby, but in 2022+ this is generally not the recommended route. While using Sass from your command line can make you feel like a badass hacker, the most foolproof way is this:
Add a Sass compiler plugin to your code editor of choice. Visual Studio has a flawless Sass plugin that works seamlessly. You won't have to worry about creating a CSS map or new CSS file, it takes care of it all for you.
The reason I'm recommending this route is 2 fold:
- If you're working as a developer for a company, you won't have always have full access to your computer's terminal.
- You can use this method anywhere, on any computer. If I'm working on my personal computer at night and don't want to reach for my work computer, I don't have to change my workflow.
What's Next After Sass is Setup?
Now is where your workflow comes into play. I have a whole article on breaking down Sass vs. SCSS, but now is the time to get familiar with the syntax, explore the capabilities of Sass, and start having some fun. Eventually, you may want to play around with Sass Frameworks if you're planning on building out a design system, but that's a different article.
Happy coding!
