David Walsh on Redesigning with Sass

Avatar of Chris Coyier
Chris Coyier on (Updated on )

David recently redesigned his blog and is having a series of guests write posts for his site. We decided to do it crossover style: he writes an article for CSS-Tricks and I’ll write an article for the David Walsh blog. He used Sass in his redesign and his article below is about that experience. I’ve been using it for closer to a year, so my post on his site is about that experience.

Creating a website without using a CSS preprocessor seems a horrible decision.  Even if only to be able to quickly modify a few colors or element dimensions, or even just to easily merge and compress CSS files, CSS preprocessors are becoming essential.  For my recent redesign of the David Walsh Blog, I decided now was the time to dive face-first into CSS preprocessors.  Here are a few thoughts about my experience, and hopefully you pick up a few tips along the way.

Deciding to be Sassy

There’s not much a decision to be made about whether or not to use a tool like Sass or LESS, the questions is more of which should be used. In the end, I chose Sass because:

  • my experiences with LESS have been … less than appealing; the tool seems … less maintained
  • a utility like Compass, a collection of mixins with an updater, is invaluable
  • the extend() API looked great
  • embedding media query styles within a selector improves organization
  • sprite generation is a huge time-saver
  • Chris Coyier told me to!

When you author a blog like David Walsh Blog or CSS-Tricks, learning a new CSS utility also presents the perfect opportunity to write about another useful topic.  Using Sass on this project was obviously the best choice.

Useful Snippets

Here are a few of the Sass snippets I used often on my site:

Vendor Prefixing

@mixin vendorize($property, $value) {
	-webkit-#{$property}: $value;
	-moz-#{$property}: $value;
	-ms-#{$property}: $value;
	-o-#{$property}: $value;
	#{$property}: $value;
}

Float Clearing

@mixin clear() {
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }
}

Offscreen Text

@mixin linkTextOffscreen() {
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    font-size: 0;
    text-align: start;
}

:hover, :active, :focus Styles

@mixin hoverActiveFocus($property, $value) {
    &:hover, &:active, &:focus {
        #{$property}: $value;
    }
}

I used these mixins quite a bit throughout my code. A few of my snippets mimic functionality provided by Compass, but I like seeing the specific styles provided by mixins.

Mistakes, Mistakes

As with using any tool for the first time, I made quite a few mistakes.  Mistakes are healthy though – you learn from them and write about them so others don’t take those same missteps.  Mistakes I made include:

  • Nesting == Bloat:  The biggest mistake I made with Sass, by far, was nesting styles when they didn’t need to be.  At the time of launch, my main CSS file was a vomit-inducing 59k!  I’m still working toward reducing the size of my styles, and it’s a much more difficult task now that the site has launched because of…
  • Specificity Clashes:  Because of my issue with nesting styles when I didn’t need to, I ran into a bunch of specificity clashes, bloating my CSS file even further.  When it got to the screen size media query CSS, I was needing to mark everything as !important.  That’s an incredible amount of CSS bloat and hassle because of improperly using SASS selector nesting.
  • Sprite Generation… Too Late:  One of the big reasons I chose SASS was because I knew SASS managed sprite generation.  What a time-saver, right?  Well, only as long as you knew how to format them in the first place.  My problem was that I created my CSS with normal background-image declarations, without paying attention to SASS’ desired format.  I went to create my sprites after knowing the correct format and said “WTF FML”.  In the end, I created my own sprites because I didn’t write my SASS correctly in the first place.  Very annoying mistake.
  • Duplicating Compass-provided Helpers:  I don’t need to cite them… I’m more than certain I duplicated functionality provided by Compass.  I’ll likely pay for it later if I don’t update my code and stay aware of browser capabilities.

Tips and Last Impressions

I want to leave everyone with a few tips for getting started with SASS, and share a few last impressions of Sass development:

  • Despite my duplication of Sass-provided functionality and nesting issues, Sass is an incredible tool that, accompanied by Compass, provides the ultimate tool+updating environment available.
  • When nesting selectors, ask yourself if it’s really necessary to do so.  Sure nesting also allows for better code organization, but a bloated stylesheet makes all of your users suffer.
  • Create variables for your CSS animation properties, especially duration and delay. Consistent animation timing ensures eye-pleasing UI effects.
  • Create variables for block padding, and use simple equations ($blockPadding/2) for lessor blocks. This ensures consistent element spacing.
  • You can nest media queries for selectors but I prefer creating a separate file for mobile / media query-specific styles;  it allows me to see the entire set of mobile styles in one glance. The same could be said for my print styles.
  • I used these directions to add Sass syntax highlighting to Sublime Text 2.
  • Keep track of your CSS file size(s) while you code, and periodically review your nesting strategy to avoid style bloat.
  • Utilize CSS animations as best you can — they can save you a load of JavaScript code down the road.

In the end, I’m incredibly happy with my decision to use Sass as my CSS preprocessor.  The documentation is helpful, you can get up and running in a few minutes, and Compass is an invaluable tool in so many ways.  My only problems with Sass were self-inflicted and will be easily avoidable the next time around.  Give Sass a chance for your next website or redesign – its usefulness is immeasurable and will pay off for the duration of your project.