For those of you that can’t tell by the title heading, I’m into Sass big time. Sass isn’t here to wreck you’re life completely. It’s a tool to do what you do already; just better. Its funny when something comes along in our lives –whether it be professionally or personally– that has the power to alter the way we operate for the better. Sometimes we fight and sometimes we give in easily. Personally speaking, Sass was the wrench in my system and we both fought with honor. There’s really no comparison to anything else (because there really isn’t anything else) that can achieve what this language (talkin’ Sass here) does for CSS. Sass doesn’t force you’re process of organization to change, it’s just making you and you’re CSS more efficient and frankly, that can’t be a bad thing –can it?

To understand what Sass is let me start by saying it’s just plain ol’ CSS with some bells and whistles attached. By all means, CSS is a great language designed to be fault tolerant, ignoring those in which it does not understand and moving on. That’s about as smart as CSS gets captain. Of course there’s the power of selectors, generated content, psuedo–selectors but even that isn’t enough. We crave more control! CSS’ers need a dynamic means other than chasing down that color red over one, two, maybe even three style sheets, possibly over multiple lines before all the changes are complete. With Sass that red can literally be changed in one spot. Yup! Your life would now be this

Client: “Can you change the color of the top banner border, header background, footer te…..” *you interrupt*
Designer: “The change is complete please pay me.”
Client: “Wow that was so fast. Thank you so much we are forever in your debt”
Designer: “You’re very welcome. Now please pay me before I go rabid”

You see all you had to do was edit one line of code in your Sass to change the client’s color request for the entire site. I’m sure you’re saying to yourself “Why don’t I just group the selectors that are similar and call it a day?” You could, but you don’t have the power of nesting, selector inheritance, @mixins and much more. With the scenario given above we can’t group something with a border sharing the same color as an element with the same background-color because we would give that border and background-color to everything grouped in that declaration.

When writing CSS, you’ll have several selectors that all begin with the same thing. For example, you might have #navbar ul, #navbar li, and #navbar li a. It’s a pain to repeat the beginning over and over again, especially when it gets long. We can also eliminate the vendor prefix duplication of otherwise identical statements. If vendor prefixes are also getting you down than I suggest reading Paul Irish’s article Vendor Prefixes are not Developer Friendly. I won’t bother to go through every nook and cranny of Sass in this article, but you may refer to the Sass Documentation for further examples and concrete evidence of how Sass can help you do what you do better. Let’s look at a few examples now shall we?

Regular ol’ contextual CSS selectors

#container { 
  width: 95%; 
}

#container #content { 
  background: white; 
  border: 1px solid #000; 
}

Sassy Sass (nesting contextual selectors)

#container { 
  width: 95%;
  #content { 
    background: white; 
    border: 1px solid #000; 
  } 
}

Regular ol’ CSS without variables

#container { 
  color: rgb(200,0,0); 
}

#container #content p { 
  background: rgb(200,0,0); 
  border: 1px solid rgb(200,0,0);
  color: white;  
} 

#container #content article h3 { 
  border-bottom: 1px dotted rgb(200,0,0); 
}

Sassy Sass with variables

This gives coders the ability to set a property in a single spot ultimately allowing us to affect whole portions of the site in one fell swoop. Awesome you say?

$branding-red { 
  color: rgb(200,0,0); 
} 
$bodyCopy-blk { 
  color: #444; 
} 

#container { 
  color: $branding-red; 
}

#content { 
  max-width: 95%: 
  p { 
    background: $branding-red; 
    color: $bodyCopy-blk; 
    border: 1px solid $branding-red; 
  }
  article { 
    width: 100%; 
    h3 { 
      border-bottom: 1px dotted $branding-red; font-size: 1.5em; 
    }
  }
}

Vendor Prefix Duplication Elimination @mixin

$mixin cssColumns($count,$width,$gap,$rule) { 
  -webkit-column-count: $count; 
  -webkit-column-width: $width; 
  -webkit-column-gap: $gap; 
  -webkit-column-rule: $rule; /*mozilla*/ 
     -moz-column-count: $count; 
     -moz-column-width: $width; 
     -moz-column-gap: $gap; 
     -moz-column-rule: $rule; /*spec*/ 
          column-count: $count; 
          column-width: $width; 
          column-gap: $gap; 
          column-rule: $rule; 
}
 
article p { 
  @include cssColumns(2,auto,1.5em,1px solid #000); 
}

Sassy Selector Inheritance

//declaration as a class 
.css3-columns { 
   /*webkit*/ 
  -webkit-column-count: 2; 
  -webkit-column-width: auto; 
  -webkit-column-gap: 1.5em; 
  -webkit-column-rule: 1px solid #000; 

     /*mozilla*/ 
     -moz-column-count: 2; 
     -moz-column-width: auto; 
     -moz-column-gap: 1.5em; 
     -moz-column-rule: 1px solid #000; 

          /*spec*/ 
          column-count: 2; 
          column-width: auto; 
          column-gap: 1.5em; 
          column-rule: 1px solid #000; 
} 

section #summary p { 
  @extend .css3-columns; 
  border: 1px solid gray; 
} 

The Sass OUTPUT
.css3-columns, section #summary { 
  /*webkit*/ 
  -webkit-column-count: 2; 
  -webkit-column-width: auto; 
  -webkit-column-gap: 1.5em; 
  -webkit-column-rule: 1px solid #000; 

      /*mozilla*/ 
     -moz-column-count: 2; 
     -moz-column-width: auto; 
     -moz-column-gap: 1.5em; 
     -moz-column-rule: 1px solid #000;
 
          /*spec*/ 
          column-count: 2; 
          column-width: auto; 
          column-gap: 1.5em; 
          column-rule: 1px solid #000; 
} 

section #summary { 
  border: 1px solid gray; 
}

Just Install the Sass you Ass!

Some front–ender’s might get scared at this next statement, but you will need to open up that scary thing called “Terminal.” Its really not as scary as it sounds so calm down it will all be better soon –I promise.

To begin we must make sure we are running Ruby. What the hell is Ruby? Ruby is a dynamic open source programming language simplistic in syntax and robust for programmers. What we are concerned with is installing the Ruby gem which is a packaged ruby application.

From the terminal window we are going to type

gem -v

This tells us what version of ruby we have. Mac users will already have Ruby installed so you Windows mongoloids have some extra leg work ahead. Refer to my downloading Ruby for windows segment of this article.

If your version of Ruby is outdated, simply enter this next command

gem update --system

sudo gem update --system

Now we can finally install this shizzit. Lets do this!

gem install sass -or- sudo gem install sass

The sudo portion allows you to override the administrative permissions. You might see this error while running the native installation and/or update commands.

Other cool things you can do with Sass

//this is a single line comment 
//it doesn't get transferred into the file.css output 

/* multi line comments such as 
this comment will be incorporated 
into the outputted file.css */ 

/* !multi line comments with an exclamation mark 
at the beginning will be outputted into the file.css. 
This is great for copyright information as an example */

Ethics Discussion

While some may disagree with Sass, it’s up to us believers to keep up the good fight. There’s been a great amount of debating and discussion within the community over pre–processing CSS by hiding valuable source code from newbie designers/developers. While that’s some food for thought, the fact of the matter is there are plenty of developer tools on the market today that allow for those curious to view the source as well as manipulate it too. Being in the age of handheld, speed wins out over the slim chance a developer is looking under the hood to discover your magical trickery.

In order to achieve speed it means minifying / compressing files and making sure our production code only receives the necessary directives. I remember when I first started using Sass with a client project where the CSS was still written in it’s native form. After removing all my CSS comments from my production code and Sass–ifying, I shaved 50k off the original file size. Yup, that is a huge savings lifted from the server and our dear users’ bandwidth. Not only is that 50K shaved off, but also the end result of the file that’s compressed and g–zipped over the wire.

The Yellow Brick Road

• http://sass-lang.com
• http://thesassway.com
• @media query bubbling with Sass
• Net Tuts Plus: Mastering Sass Lesson 1
• Net Tuts Plus: Mastering Sass Lesson 2
• Responsive Sass Awkward Hugs (13:33)
• Double Dribbble with a Boston Accent (56:20)
• How I’m Implementing Responsive Web Design
• https://github.com/jcroft/jeffcroft-css-framework-v2
• Adding Sass / Scss support for Sublime Text 2

Installing Ruby for windows

Windows users can install Ruby via the Ruby Installer for Windows, and Linux users can install it via their package manager.