Getting SASSy

I recently got acquainted with SASS and I’m a big fan! SASS stands for “Syntactically Awesome Stylesheets” and its purpose is to simplify writing CSS and compiling everything into as few of stylesheets as possible. Overall it was not a very difficult transition into the new syntax that comes along with SASS. After all, it still requires developers to use CSS, it just spices it up a little bit. A few things that SASS adds to CSS that isn’t there normally:

  • Functions to dynamically write CSSSass
  • Easy way to minify the code (compresses all of the code into one line to decrease file size and the amount of connections the website has to make to the server)
  • Allows selector nesting rather than typing out long selectors for specific items
  • Grants the capability to copy the styles of another item without re-typing them

Another feature takes a bit of explaining. With SASS, developers can use the “%” sign to create dummy-classes. And what I mean by that is you can create a set of styles with no intention of adding that specific class to your markup. This is great for two reasons, the greater of which being that there is now no need for multiple classes on an element just to get the right styles going. Instead you can create a selector for the element and extend (@extend) the styles of one of those dummy classes to apply those general styles without adding a class to the markup. It cleans up the code and provides the same functionality.  The other great part is that they function just like a class. You can apply those styles and then add to them as you see fit in your stylesheet.

SASS runs in the background while you’re writing your code. There are two ways that it works, either by command line, or downloading a program to do it for you. I personally have been running with command line but that is mainly because I feel comfortable doing so. In command line I type “compass watch” in the directory for the site and it does everything else. If you choose to use a program to do it for you, the program typically runs in the background and will even automatically refresh your web browser to see your changes in real time. Every time you hit “save” on a SASS file, either the command line or the program will run the code necessary to compile the file and save it as a CSS file to be used on the website.

When I was developing with SASS I was working on responsive websites. To help with that I used two frameworks. The first is Susy, which is a responsive framework that provides grid functionality and a very simple way to write media queries. Susy relies on Compass, which is the other framework I used, which adds in ways to easily write CSS3 styles with all of the different vendor prefixes.

Like learning any new set of frameworks, it does take time to become efficient with the new workflow and the formatting of the stylesheets. With more experience it becomes easier, and truly speeds up the markup process. Would I recommend it for other developers? The answer is yes. The more I use SASS the more I am finding that I enjoy coding more that way. It makes more sense and in the end decreases the page weight that is downloaded from the server.

Have experience using SASS? Share with me in the comments!

One thought on “Getting SASSy

  1. Pingback: Compass vs Bourbon | The Karcher Group Blog

Leave a Reply

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

six + 4 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>