If you’re reading this post, I will assume that you are already familiar with Sass. If not, it’s a CSS pre-processor, which adds support for variables, selector nesting, and other features to your CSS styles. See the Sass website for more information.
Here’s how I use Sass with my development process. There are many ways of integrating it into your workflow, so feel free to play around when you’re more comfortable. Your first step is to install Ruby.
Visit the Ruby Installer website to get the latest installer for Windows, and go ahead and complete the installation. When it asks about adding Ruby executables to your PATH, check the box. Otherwise, you will need to type the full directory path to execute the Ruby program. It’s also a good idea to associate .rb and .rbw files with Ruby. The installation should complete without the need for any other input.
Installing the Sass Ruby Gem
Now that Ruby is installed, it’s time to install Sass. Sass is packaged as a Ruby “gem,” and gems are basically programs that rely on Ruby to run. We’ll be using Sass from the command line, so open a command prompt (Windows key + R, then type
cmd and press OK). Let’s make sure that Ruby was installed correctly by typing
ruby -v and pressing Enter. If the version number that you installed appears, then you’re good to go.
To install Sass, type
gem install sass and press Enter. Hopefully, everything went well, and now it’s time to start using it.
The two major workflows that I’m aware of are:
- Using Sass locally for development and deploying CSS to the production server
- Deploying Sass to the server and relying on server code to translate it into CSS before serving it up to website visitors
Obviously, the second process is a bit more complex, so we’ll focus on the first — but feel free to investigate further if the other workflow is more appealing to you.
I create two directories in my Web projects: one called “scss” for my .scss (Sass) files and one called “css” for my final, minified CSS files. To make the translation from Sass to CSS simple, we’ll use the
--watch modifier in the Sass command line tool to automatically handle the translation any time we save our Sass files. Assuming you’ve created these directories and started your own .scss file in the “scss” folder, you’ll need to open your command prompt and change to your project directory (e.g.
Next, enter the following command:
sass --watch scss:css
It should respond by saying, “Sass is watching for changes.” Go ahead and make some updates to your Sass file, save them, and check your “css” folder to see how Sass is automatically translating your Sass code into CSS. When you’re done, hit Ctrl+C in the command prompt and enter “y” when it asks to terminate the batch job to stop Sass from watching for changes.
One more thing: your CSS code should really be minified/compressed before deploying to the server. You can do this with the
--style modifier. So instead of the earlier command you entered, use the following:
sass --watch scss:css --style compressed
There are many other things you can do with the Sass command line tool, but this is a good starting point, and should be just enough to start using Sass in your own workflow.