Useful _s SCSS mixins

mixins.scss

@mixin clearfix() {
    &:before, &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

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

@mixin font-size($sizeValue: 1.6) {
    font-size: $sizeValue + px;
    font-size: ($sizeValue / 10) + rem;
}

@mixin divet( $direction, $color ) {
    background-color: $color;
    &:after {
        content:"";
        display: block; /* reduce the damage in FF3.0 */
        position: absolute;
        width: 0;
        border-style: solid;
        border-color: transparent $color;
    }
    
    @if $direction == left {
        &:after {
            top: 12px;
            left: -10px;
            right: auto;
            border-width: 10px 10px 10px 0;
        }
    } @else if $direction == right {
        &:after {
            top: 12px;
            left: auto;
            right: -10px;
            border-width: 10px 0px 10px 10px;
        }
    } @else if $direction == top {
        &:after {
            top: -10px;
            right: auto;
            left: 20px;
            border-color: $color transparent;
            border-width: 0px 10px 10px 10px;
        }
    }
}

/* Text meant only for screen readers */
@mixin screen-reader-text {
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;

    &:hover,
    &:active,
    &:focus {
        background-color: #f1f1f1;
        border-radius: 3px;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
        clip: auto !important;
        color: #21759b;
        display: block;
        font-size: 14px;
        font-weight: bold;
        height: auto;
        left: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000; /* Above WP toolbar */
    }
}