Icon-fonts. They are pretty awesome, but much like managing Sprite files, there are issues that make them a real pain to manage. Sure there are full libraries out there that you can grab wholesale and rely on their documentation, but for optimization and performance reasons you do not want to load up a series of libraries just to use a few icons. Leveraging the power of HAML and Sass we can make this less painful and at the same time maintain a living style guide. Basically, winning all over the place.

read the post

Sprites are a pain in the ass, we all know that. And with a recent reminder of Google’s Bootstrap I am once again reminded of the horrible ways that people solve problems.

So let’s get intelligent. Here is a really kick Sass example for how we can use some of Sass’ power features to make this less painful, write better classes that don’t break performance rules and fits the popular mindset of OOCSS.

Read the post | Play with the code

Sass’ @extend feature is extremely powerful. But not used wisely or without some understanding of what will happen when using this feature you can find yourself in some interesting situations.

Just recently I used the @extend feature in a very simple case that had an extremely telling outcome.

Now I think I really understand what this means: @extend works by inserting the extending selector (e.g. .seriousError) anywhere in the stylesheet that the extended selector (.e.g .error) appears.

Read the post, play with the code

The common questions is, “How can I see __________ when writing Sass?”

For a while now, this feature has been available in Google Canary, but as of Chrome’s latest release, Sass and Source Maps are available in Chrome’s inspector.

The process is very simple to set up and once you are there, the rewards are immeasurable!

Simply follow the steps outlined in Codeography, just replace Canary with Chrome and you are rockin!

A new simple yet powerful tool in SassMeister brings your Sass Gists ALIVE for quick code sharing with colleagues.

Gists are awesome, lots-o-love for the kids at Github for coming up with that. But with all the really awesome code examples out there to look at, there was something that always left me looking for more. I wanted to edit the code and see the results. And not have to clone, etc. Yes, I am THAT LAZY!

This plays especially tru for processing languages where I can’t simply clone some code and play. I need to do a little bit of set up first (remember LAZY). This was the reasoning behing SassMeister in the first place and the reasoning behind it’s latest feature that brings Sass Gists ALIVE!

Gists are static, SassMeister is ALIVE

It is an extremely powerful feature that is so simple to use.

1. Create your Gist either from Github or from SassMeister itself
2. Get the Gist ID, something like 4119580
3. Craft the SassMeister URL, sassmeister.com/gist/4119580
4. Tweet it
5. Profit!

As shown in this linked example, SassMeister will look for the first available Sass file and display. So you can have a full example that has a readme, Sass and then CSS all in your Gist.

It’s that simple. Absolutely BADASS!

Draft Episode 15: Why Sass? raises a very interesting question. “Do you really have to use Sass?”

For the most part, no you don’t need Sass to get work done. The internet has been around for a long time and CSS was here WAY before Sass and people were able to get work done. But this really a valid argument?

…

Read the full article