/* I took these from this nice little article from David Walsh – http://css-tricks.com/redesigning-with-sass/ */



/* 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;
}


/* Style for :hover, :active, :focus */

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



/*comment from article */

/* Instead of your version of vendorize, I use: */

$prefixes: ("-webkit-","-moz-", "-o-", "-ms-", "");
@mixin prefix($property, $value) { 
    @each $prefix in $prefixes {
        #{$prefix}#{$property}: #{$value};
    }
}


/* which has the advantage you can use it like this */

@include prefix(transition, "color #{$animation-speed} linear");
too (you could even use multiple properties like so:

@include prefix(transition, "color #{$animation-speed} linear, margin-left #{$animation-speed} linear");