Sass Unit Testing with True

True is a library to provide unit testing for Sass. Today we are taking a brief look at how it works and how it can be incorporated into a project. While this won’t necessarily be something that you use on every project it is helpful if you are building a framework or set of standardized […]

Migrating from Scut to Bourbon

On an upcoming project I’m going to be using Bourbon and Neat (instead of Compass and Gumby – hmm…I just saw that they are discontinuing Gumby) primarily so that I can use libsass for faster Sass compile times. I usually use Scut but I’ve noticed that there is a fair bit of overlap between what […]

Feature Enabled Mixins for Sass

It’s not uncommon to have some CSS that is for certain browser capabilities (JavaScript, animation, etc). By combining a feature detect solution like Modernizr (which sets classes on the html element) with some basic Sass mixins we can make the SCSS more readable. Here is a (contrived) example. See the Pen OPGWdr by Matt Vanderpol […]

Thoughts on Managing Colors in Sass Projects

While working on building out a site from PSD comps, it is common to want to extract colors into a single location and name them to facilitate reuse and bring some consistency to the final pages. However, depending on how many colors are at play in the site, this can be a non-trivial activity. I’m […]

Exploring Tile Layouts with Bourbon Neat

Frequently in projects, I find it necessary to lay out a set of tiles (such as logos) on a “grid” system. Invariably different page designs have different requirements for layout: 6 up 5 up centered 4 up but with space on each side 3 up To date, I haven’t come up with a system that […]

Better Sass through Susy susy-get Function

Today we are continuing our look at Susy internals to get a better understanding of how Sass can be used in more advanced ways by examining the susy-get function. susy-get Function [gist id=”b36ea4d22606bea80c07″ file=”susy-get.scss”] Comments – Lines 1-5 Every Susy function or mixin that I’ve seen starts with a comment block that explains the purpose […]