SASS Clearfix

@mixin clearfix($before, $after){
    @if $before{
        &:before{
            content: '';
            clear: both;
            display: block;
            width: 100%;
        }
    }
    @if $after{
        &:after{
            content: '';
            clear: both;
            display: block;
            width: 100%;
        }
    }
}

.clearfix--after:after{
    @include clearfix(false, true)
}
.clearfix--before:before{
    @include clearfix(true, false)
}
.clearfix{
    @extend .clearfix--after;
    @extend .clearfix--before;
}
.clear{
    clear: both;
    display: block;
    width: 100%;
}