Gordonmac Dot Com

I’ve always enjoyed writing CSS, doing the calculations required to get the percentage widths for page elements is almost therapeutic in some ways, so the idea of using a preprocessor to develop CSS for websites was, for me, for a long time, something I couldn’t really get into. The main reason being was that it seemed to be another learning curve layered on top of CSS, and although fairly minimal, still time consuming.

In my rash dismissal of CSS preprocessing I had overlooked one of the features of SASS (Syntactically Awesome StyleSheets) that I’d probably have jumped at from the get-go — “mixins”! I was already aware of the ability to use variables within SASS, but not mixins! How stupid of me!

Mixins — The best thing about SASS

Mixins are to CSS what classes are to PHP — reusable code that can be fed different arguments as required throughout your CSS file, saving you from having to write the same convoluted screeds of CSS declarations over and over again with slightly different values.

For example, here’s a mixin for adding rounded corners to borders:

@mixin border-radius($radius)
 {
 -webkit-border-radius: $radius;
 border-radius: $radius;
 background-clip: padding-box;
 }

How many times do you have to write the code for rounded corners? If you’re anything like me it will be plenty! With the above mixin in my SASS files all I need to do is “include” it within the existing declarations for a selector:

.wrapper-navigation
 {
 background: rgba(232,232,232,1);
 border: 2px solid rgba(232,232,232,1);
 @include border-radius(‘10px’);
 }

When the final CSS build is created, the following will be generated:

.wrapper-navigation
 {
 background: rgba(232,232,232,1);
 border: 2px solid rgba(232,232,232,1);
 -webkit-border-radius: 10px;
 border-radius: 10px;
 background-clip: padding-box
 }

In any subsequent CSS rules where I need rounded corners, I can just add @include border-radius(‘10px’); again if needed — what a time saver!

Standard math operators — The second best thing about SASS

I said earlier that I found the calculation for percentage widths quite an enjoyable process, and while this was true, the process was rather time consuming, when all you were trying to do was draft a grid layout.

I had to open up my calculator app, take the element’s desired width, divide that by the parent elements maximum width, and multiply the number by 100.

Now I can just do this:

width: ((640/980)*100%);

However, It gets better! I recently discovered, much to my delight, that SASS has a built-in percentage function, so it’s just a case of adding the to your selector:

width: percentage(640px / 980px);

Variables — They make it all work together

It’s not really fair to list variables as the third best thing about SASS, considering I’ve only listed three, because variables are core to any programming language. I use SASS variables to define things like base colours, fonts and widths when setting up my site, and store them in a file named “_variables.scss”:

$maxwidth: 1140px;

$doc-gutter: 40px;
 $doc-background: #FFF;
 $doc-font-size:15;
 $doc-line-height:24;
 $doc-line-height-alt: 1.35em;

$black: rgb(0,0,0);
 $white: rgb(255,255,255);

$doc-primarycolor: rgb(47, 77, 79);
 $doc-secondarycolor: rgb(74, 88, 84);
 $doc-tertiarycolor: rgb(134, 103, 91);
 $doc-quaternarycolor: rgb(213, 205, 185);
 $doc-quinarycolor: rgb(34, 184, 169);

$font-stack: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
 $font-stack-alt: “Bodoni MT”, Didot, “Didot LT STD”, “Hoefler Text”, Garamond, “Times New Roman”, serif;
 $font-code: Monaco, Courier New, monospace;
 $font-primary-color: $black;
 $font-secondary-color: rgb(128,128,128);

$link-primarycolor: $black;
 $link-secondarycolor: $doc-tertiarycolor;

$navigation-background: transparent;

$heading-font-stack: $font-stack;
 $heading-primary-color: $doc-secondarycolor;
 $heading-base-weight: 300;

$table-heading-color: $doc-primarycolor;
$table-border-color: rgb(203,203,203);

$form-border-color: rgb(18,159,234);

This makes life very simple when changes are required.

What I use to work with SASS

I’m a Mac user, so these applications are all OS X, but there are windows alternatives to all of these and I’ve provided links below:

Hammer for Mac — Used for compiling SASS and the final “builds” for my website projects. It allows me to use variables in both SASS and HTML, and also allows me to use HTML includes. If you’re a Windows user, then Prepos is a fantastic program, boasting the same features as Hammer for Mac.

Anvil for Mac — A menubar application for controlling local websites. It’s created by Riot Ltd, the company who also created Hammer for Mac, so they play nicely together. If you use Windows you can simply set up IIS to do the same thing (Windows 8 and Windows 7 instructions.)

Coda — My longtime favoure HTML and CSS editor. If you use Windows, I’d suggest giving SublimeText a go.

If you haven’t tried SASS, please to give it a go.