Getting Sassy

Today is the day. Intro to Sass.

I wanted to hold off on Sass until I got a full grasp on CSS, in order to better understand its limitations and thus understand the need for Sass. Well, I am realizing more and more that ever fully understanding the ins and outs of CSS is near impossible. Especially for people like me that often get distracted making pigs. CSS continues to blow my mind each day, so hopefully Sass does not lead to a complete head implosion. Also, if there is a way I can make a more badass pig with code, well, I'm all about it.

Let's review some of the highlights.

Variables. Sass allows you to store frequently used CSS values. I can already imagine how this would be helpful in structuring consistent style on a site.

Screen Shot 2014-01-17 at 10.58.48 AM

Nesting. Sass allows you to nest your CSS selectors. This provides great visual organization, much like that of HTML. I already feel relieved by this, as reviewing my CSS can often cause me physical pain. However, knowing not to over-nest seems to be just as important as knowing how to; it is suggested not to go more than four levels deep. Screen Shot 2014-01-17 at 12.04.18 PM

Partials. You can create partial Sass files, which allows you to separate your stylesheets into separate files. This file is then saved as a Sass file with a leading underscore: _partial.scss. This allows you to reuse frequently used styling.

Import. Sass streamlines the process of combining code documents; it pulls code from one document into another.

Mixins. These seem to be similar to variables. But more intense. These allow you to make groups of CSS declarations that you want to reuse throughout your site. To create a mixin you use the @mixin directive and give it a name. This will take a block of styles you created before and apply it to the selector of your choice using the @include directive. Apparently you can include mixins within other mixins, but I wanted to end the week on a fairly good note and needed to stop my research on this topic there.Screen Shot 2014-01-17 at 12.29.07 PM

Extend. Using @extend allows you to share a set of CSS properties from one selector to another. This feature can apparently be overused often, so be aware of that. The following example demonstrates the use of @extend to apply some CSS values from the header to the "footer" text. You can continue additional styling from there, which essentially overrides those aspects of the @extend.

Screen Shot 2014-01-17 at 12.40.13 PM

View the entire code here. Also useful: Chris Coyier's Sass Style Guide, and this article at A List Apart by David Demaree.

JB