Another one bites the 'SASS'

Micha Goldfine - Thursday, June 20, 2013

SCSS is a great way to produce clean and quick CSS files. Using a SCSS framework such as Compass makes it even easier and quicker to produce not only clean CSS files but also compatible with the various browser's engines and latest HTML 5 syntax.

Developing with SCSS and Compass

For the past two years I have slowly moved away from traditional CSS coding, adapting SCSS and Compass as my main framework for developing web apps and websites.

SCSS coding structure is cleaner and clearer than traditional CSS by using variables and mixins to create a more consistent output and smaller footprint.
More about SASS and SCSS can be found here.

SCSS needs to be complied into CSS. There are various ways to compile SCSS into CSS such as using the Mac's Terminal or using Compass which not only is a complier but also and most importantly is a SCSS library full of pre-build variables and mixins. 
More about Compass can be found here

"Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain."
Cited from Compass.org

Setting up a Compass website

Setting up a Compass project can be achieved using the Terminal (on a Mac) or if you are like me and prefer a GUI I would recommend using CodeKit from Incident57. CodeKit simplifies the process by simply using a straight-forward "create and forget" approach. 

CodeKit not only will create a Compass project for you with all the necessary files and folders but will also "listen" to any changes you make to the SASS (or SCSS) file and will compile the CSS on the fly allowing you to see the style changes in the browser in real time.

This is a huge time saver specifically aimed for designers who are not familiar or competent with Terminal's (or the command line in Windows) command lingo. 

Create Compass ProjectCreating a Compass project using CodeKit is simple. Click on File > Create New Compass Project... or use the cog icon at the bottom of the app.

The next window will allow you to specify your assets folders naming, the coding syntax and other useful features such as Compressed, Nested or Minified outputs. I usually choose the compressed option to achieve the smallest file size as possible. You can override these settings in the 'config.rb' file in your root directory at any time.

CodeKit Setting Screen

Once you choose the parent folder a project will be created with all the necessary folders and files.

Using a SASS Framework

Now that we have a project structure ready all we need is to start coding some SASSY stylesheets and HTML5 code. If you're like me (and many others) why start from scratch when there are so many great frameworks out there such as Twitter Bootstrap and my favorite (at the moment) Zurb Foundation.

The main reasons to use a framework are:

  • Responsive grid layouts
  • Pre-built Javascript and jQuery libraries
  • Solid and dedicated users and developer groups
  • Frequent updates and bug fixing
  • Cross browser support (even for good old IE8 if you must)
  • SASS options
  • Free

Zurb Foundation 4

Zurb's Foundation version 4 is focused on cross device and responsive design layouts and is packed with all necessary CSS and JS files to allow for quick design and development process.   

On the Zurb website you can find ready-made grid templates which speeds up the development process even more. Another cool asset from Zurb is the "stencil" file which is basically all HTML elements in a flat graphic file to be used in the planing and wire-framing process.

So how do we use a framework with Compass and CodeKit?

Since this post is about SCSS and Compass you will need to download the SCSS files. If you're going to use Zurb Foundation 4 you can copy the files from the GIT repository website and simply add the files to your Compass project.

If you prefer to use Terminal simply copy the command lines from Zurb's website. Make sure your project directory path is correct (hence the reason I prefer using CodeKit).

Zurb file structure These are the files and folders used by Zurb Foundation 4.

As you can see, the framework uses a 'normalise.scss' file so you don't need to reset or override rules for each browser.

In your HTML head tag you will only need to the 'foundation.css' stylesheet file. foundation.scss uses the @import rule to import all other .scss files (components). Even though already small in size you don't have to import all the component scss files. You can comment-out the files you don't want or need to use and/ or add new custom scss (os css) files such as your own overrides and skin/ themes.

If you use CodeKIt to create a compass project make sure you rename the folders accordingly. For instance, the default CodeKit Javascript folder is named "javascript" but Zurb's folder is named "js". 

When you first save the 'foundation.scss' file a new 'foundation.css' file will automatically be created by your Compass watcher, in our case CodeKit watcher. If you use Terminal the command line will be "yourProjectLocation compass watch".

Adding some Compass Goodies

Since we are using Compass why not take advantage of some of Compass's great SCSS libraries. To add the entire Compass SCSS library simply add @import compass into your 'foundation.scss' file or add only parts of Compass that you might find better suited for you project such as CSS3 or typography components.

For instance, I like to add some CSS3 libraries since they include all the vendor specific prefixes and some cool mixins. For example I added the 'border-radius' mixin library. In order to add a border radius to a selector in my sass file I only need to include the mixin as so: .mySelector {@include border-radius(3px);}

The CSS output of this single @include will be:

As you can see, using Compass border-radius mixin will compile a vendor specific prefix output reducing a huge amount of development time and eliminates any potential bugs. 


As you can see using solid frameworks like Zurb and Compass you can really speed-up your front-end development process leaving cross-browser and responsive issues behind and focus on the final result. 

You don't have to code in SCSS or SASS, you can download the simple CSS bundles and add your own CSS skin overrides if you wish.

One caveat I should mention though, since you're compiling all your SASS files into one CSS file it's harder to debug and use inspectors such as Chrome's inspector or Firebug. When you "Inspect" The CSS the line numbers correspond to the complied CSS not your SASS file so sometime it's hard to find the origin of CSS rule. There are ways to overcome this but once you get used to a specific framework it's pretty easy to know you're way around. In most cases I will leave the framework's SASS in tact and create a skin.scss override file.


Recent Posts