Type Baseline Sass Utility

Using a baseline to set type is a must if you want to achieve vertical rhythm. Dan Eden & Michael Wright created basehold.it, a dead simple solution that adds a baseline to an element's background. All you need to do is add a background-image property and point it to their URL.

I wanted to additionally control the background-position so I created a little mixin. The basehold.it website has a very nifty feature that hides the grid by clicking anywhere within the element. It's such a simple and useful feature that I peed my pants a little the first time I used it. So that's in here as well.

Nothing groundbreaking, but something everyone needs to have in their library. So here you go. Or grab the gist with extended features here.

// _baseline-it.scss
    @mixin baseline-it($height:24, $red:0, $green:0, $blue:0, $offset:0) {
        background-image: url('http://basehold.it/i/'+$height+'/'+$red+'/'+$green+'/'+$blue+'');
        background-position-y: $offset * 1px;
        &:active{
            background-image: inherit;
        }
    }

Don't forget to import the mixin partial

//global.scss
    @import "baseline-it";

Now include the mixin in your selector:

//layout.scss
    .container{
        @include baseline-it(36, 50, 20, 20, 15);
    }