CSS Helpers

_helper.scss

// Helpers, adapted from HTML5 boilerplate

// Image replacement
@mixin ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
    &:before {
        content: "";
        display: block;
        width: 0;
        height: 100%;
    }
}

// Hidden
%hidden {
    display: none !important;
    visibility: hidden;
}

// Visually hidden
@mixin visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    %visuallyhidden:active,
    %visuallyhidden:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }
}

// Invisible
%invisible {
    visibility: hidden;
}

// Clearfix
@mixin clearfix {
    *zoom: 1;
    &:before,
    &:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }
    &:after {
        clear: both;
    }
}

I used to use HTML5 boilerplate and I still love the helpers that come with it. I use them constantly so I adapted this quick snippet to import in my Sass routines.

A couple of these need to be mixins and a couple can survive as just helper classes. Made those updates.