Start using Sass. It’s easy and it’ll change your life. For real.

A while ago you could hear me saying things like:

I know using a CSS pre-processor would probably change my life, and you’re a big loser if you don’t use one, but… [insert excuses here].

I think it was mostly the decision between LESS and Sass, learning curve avoidance and the daunting “change how you’ve done things until this point” feeling that kept me from using a CSS pre-processor. I knew I needed to start using one though, but I didn’t know which one to go with. Then WordPress core made the decision to use Sass. I followed suit soon after.

It took me about a day to learn the basics and start using Sass. The time it took me to love it and never want to do CSS the old way again was about 10 minutes.

Sass is awesome and it is really really easy to make the switch. Here is how I did it.

  1. Learn Sass
  2. I’m not going to go into detail about all the cool things Sass can do, but there are a few.

    • CSS pre-processing – Sass lets you do a lot more than you can with regular CSS. At the end of the day it builds nice (minified if you prefer) CSS files for your site to use.
    • Variables – In regular CSS you often have to repeat styles like colors, or create selectors for them and add them to your HTML elements.

      h1 {
         color: #FF0000;
      }
      
      .red {
         color: #FF0000;
      }
      <h1>This is red</h1>
      
      <div class="intro red"> 
         This text is red, too. 
      </div>

      If you needed to change the shade of your red style you would have to copy and paste the new hex code in every location in your stylesheets. On the HTML side, if you no longer wanted to use the red class you would have to remove it from all the elements using it. You could potentially be modifying a lot of files — a giant pain in the ass.

      With Sass variables you can define your red color in one place and use it anywhere you want. If you need to change the shade of red you just edit the variable and it’ll update everywhere the variable is used.

      $red: #FF0000;
      $green: #00FF00;
      
      h1 {
         color: $red;
      }
      
      .intro {
         color: $green;
      }
      <h1>This is red</h1>
      
      <div class="intro"> 
         Now this is green.
      </div>
    • And More! Check out Nesting, Partials, Import, Mixins, Inheritance, Operators and (say what?) color functions.

    I started with Sass Basics to get familiar with basic functionality. TreeHouse has a really good “Deep Dive” Sass Course you can take online to learn more advanced concepts.

  3. Get it up and running on your computer
  4. To use Sass you need to install Ruby. Don’t let that freak you out, it’s not a big deal and you don’t have to learn Ruby to use it.

    I use a Windows machine and Sublime text for writing code. I am not Ms. Command Line (even though I used emacs to write HTML files in the early 90s), and I managed to set Ruby and Sass up without a problem.

    • Setting Up Sass on Windows – I followed these step-by-step instructions from impressivewebs.com and had Sass installed in minutes. If you are a Sublime text user like me, you only need to complete step 1 and 2 of that guide.
    • Using Sass with Sublime text – There are a few plugins for Sublime Text that makes writing Sass work like a charm.
      • First, make sure you have Package Control installed. Package control allows you to add plugins for Sublime Text. If you don’t have it installed, just go to the Package Control install page. Copy the import code there, paste it into the field that pops up at the bottom of Sublime Text when you select View > Show Console and hit enter.
      • Next, install Sass plugins. Josh Earl has a great post on How to Add Sass Support in Sublime Text. Essentially, you will be installing 2 plugins: sass-textmate-bundle (“Sass” in Package Control) for pretty code highlighting (read Josh’s article for details on configuring the plugin) and SASS Build that will allow you to compile your .scss (the extension for Sass files) files into regular .css files (minified or not).
      • Finally, a couple tweaks. You can automate CSS file compiling so it happens every time you save a .scss file with the plugin SublimeOnSaveBuild. You’ll never have to worry about having the newest compiled version of your CSS files. On the other hand, you don’t want to create a .css version of all of your .scss files (like partials). Joshua Winn has a post with the snippet of code you need to make Save on Build ignore partials. You would be adding this code under Preferences > Package Settings > SublimeOnSaveBuild > Settings - User.

    With Sublime Text, and a few plugins, you don’t have to worry about messing with the command line to make Sass “watch” your files. You just have to hit save.

  5. Start using it with your projects
  6. The best part of switching to Sass is you can ease into it.

    It goes like this: take your .css file and change the extension to .scss. That’s it.

    Sass can completely understand regular CSS. You can start off slow by using Sass functions on new edits to your style sheet, you don’t have to convert everything you’ve done previously to use Sass functions. However, you’ll want to. Soon.

    Once you start using it, you’ll want to go through whatever base CSS files you use for new projects and Sassify it. There are plenty of converters out there to help you do that.

That’s how I made the switch, I encourage you to do it, too! If you enjoy writing CSS you will LOVE using Sass.

2 thoughts on “Start using Sass. It’s easy and it’ll change your life. For real.

  1. I recommend something like Grunt to translate SASS to CSS. You can setup a default command that creates readable CSS and a deploy command that creates minified CSS. Grunt can automate almost everything – JS, SASS, Deployment, etc.

    You can have a simple setup running within minutes (or some hours if you are new to Grunt).

    • Hi Jürgen!

      I started using Grunt to compile and minify Sass and JS and you are absolutely right, it’s pretty great.

      Thank you!
      -Tracy

Got something to say? Leave a comment :-)

Your email address will not be published. Required fields are marked *