// ## Sticky Footer // // This must be a top-level mixin. // // Usage: // // <body> // <div id=“root”> // Your content here. // <div id=“rootfooter”></div> // </div> // <div id=“footer”> // This is the footer. // </div> // </body> // // And then in the SCSS: // // @include sticky-footer(100px, “#root”, “#rootfooter”, “#footer”); @mixin sticky-footer($height,$root,$rootfooter,$footer) {

html,body {
    height: 100%;
}

#{$root} {
    @include minheight(100%);
    clear: both;
    margin-bottom: -#{$height};

    #{$rootfooter} {
        clear: both;
        height: #{$height};
    }
}

#{$footer} {
    clear: both;
    position: relative;
    height: #{$height};
}

}

// Change the color of the text selection. // // If you want to be cool you should use hot pink here. @mixin selectioncolor($color) {

::-moz-selection { 
    background: $color; 
    color: #fff; 
    text-shadow: none; 
}

::selection { 
    background: $color; 
    color: #fff; 
    text-shadow: none; 
}

a:link { 
    -webkit-tap-highlight-color: $color; 
}

}

// Perform an image replacement technique by hiding the text in favor of // the background image url. @mixin imagereplacement {

display: block; 
text-indent: -999em; 
overflow: hidden; 
background-repeat: no-repeat; 
text-align: left; 
direction: ltr;

}

// Apply this mixin to hide something, even from screen readers. @mixin hidden {

display: none;
visibility: hidden;

}

// Apply pre-style wrapping. @mixin prewrapping {

white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
word-wrap: break-word;

}