Getting Started with SASS
March 28, 2017
You will find that most modern web designs are using SASS, the CSS pre-processor that drastically improves your workflow and the quality of your CSS. SASS stands for Syntactically Awesome Style Sheets. The way SASS works is that you write your SASS files, which are either .SCSS or .SASS by extension depending on whether or not you are using the indented syntax. The developers Hampton Catlin and Nathan Weizenbaum are credited with the invention of SASS. Hampton and Nathan created SASS while looking for a better way to maintain complicated stylesheets.
To work with SASS you need a tool that will compile your SASS files into CSS files that can be read by all modern browsers. You can do this several ways: if you have Ruby installed you can issue a watch command from your Terminal to have Ruby watch the directory containing your SASS files and once they are changed, compile them to CSS. Most popular IDE’s such as PhpStorm have SASS compiling built-in and there are alot of stand-alone applications such as CodeKit and Koala that will compile your SASS files into CSS on-the-fly. Lately I’ve been using PhpStorm for my SASS but CodeKit is also an excellent choice. I’d recommend newcomers to SASS try out several of the available tools and find the one that’s most comfortable for you.
SASS will help you code your web projects faster and more efficiently. SASS gives you a whole arsenal of tools that you can use to generate beautiful vanilla CSS that you can use in your projects. Functions, nestable styles, variables, math and a new simplified syntax are just a few of the reasons why you should check out SASS, if you aren’t already using it.
For beginners looking to get started with SASS, I recommend using Koala. Koala is a GUI application for Less and Sass that’s available for Mac, Windows and Linux. There are several SASS applications out there and each of them has their pros and cons. Personally I like CodeKit the best out of them all but it is a paid application. I’m going to cover the basics of downloading and installing Koala and starting your first SASS project.
To download Koala, click here. The website should offer you the correct version for your operating system automatically then all you have to do is click the big green download button to proceed.
Once you have Koala downloaded and installed go ahead and open and it. You screen should now look similar to the one below:
Adding Your Project
At this point, you need to add your web project to Koala so you can begin working with SASS. To do this all you have to do is either drag your web project folder onto the Koala application window, or you can click on the plus button in the top-left and browse to your web project. After you have added your web project to Koala your screen should look something like below:
Koala will automatically detect any .SCSS or .SASS files you have in your project and you will have some configuration options available on the right-hand side. Take notice of the ‘Auto Compile’ option that will always be enabled by default. This option tells Koala to compile your SASS files to vanilla CSS every time you save the file.
Now that you are getting started with SASS, you might want to checkout Bourbon, a popular lightweight SASS toolset. Once you have Bourbon installed you can take advantage of Refills, a well written set of frequently used frontend components.