CSS Sass SCSS Mixins

_mixins.scss

/* ----------------------------------------------------------------------------
* SCSS Mixins.
* ------------------------------------------------------------------------- */

/**
 * MIXIN: for animation delay.
 *
 * USAGE:  aa_delay($value).
 */
@mixin aa_delay($value) {
    transition: all $value ease;
    -webkit-transition: all $value ease;
    -moz-transition: all $value ease;
    -o-transition: all $value ease;
}

/**
 * MIXIN: for styling placeholder.
 *
 * USAGE:  aa_placeholder.
 *
 */
@mixin aa_placeholder {
    &::-webkit-input-placeholder {
        @content;
    }
    &:-moz-placeholder {
        /* Firefox 18- */
        @content;
    }
    &::-moz-placeholder {
        /* Firefox 19+ */
        @content;
    }
    &:-ms-input-placeholder {
        @content;
    }
}


/**
 * MIXIN: for clearfix
 *
 * USAGE: @include clearfix;
 */
@mixin clearfix {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

/*
 * MIXIN: @font-face
 *
 * Bulletproof font-face via Font Squirrel.

 * USAGE: @include fontface('family', 'assets/fonts/', 'myfontname');
 */
@mixin fontface($font-family, $font-url, $font-name) {
    @font-face {
        font: {
            family: $font-family;
            style: normal;
            weight: normal;
        }
        src: url($font-url + '/' + $font-name + '.eot');
        src: url($font-url + '/' + $font-name + '.eot#iefix') format('embedded-opentype'),
        url($font-url + '/' + $font-name + '.woff') format('woff'),
        url($font-url + '/' + $font-name + '.ttf') format('truetype'),
        url($font-url + '/' + $font-name + '.svg#' + $font-name) format('svg');
    }
}

/**
 * MIXIN: IMAGE RETINA
 *
 * USAGE: @include image-2x(/img/image.png, 100%, auto);
 */
@mixin image-2x($image, $width, $height) {
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
        background-image: url($image);
        background-size: $width $height;
    }
}

/**
 * MIXIN: Responsive Media Queries
 * USAGE:
    @include r(240)  { }
    @include r(320)  { }
    @include r(480)  { }
    @include r(768)  { }
    @include r(1024) { }
    @include r(1140) { }
    @include r(1280) { }
*/
@mixin r($point) {
    @if $point==240 {
        @media (min-width: 240px) {
            @content;
        }
    }
    @if $point==320 {
        @media (min-width: 320px) {
            @content;
        }
    }
    @if $point==480 {
        @media (min-width: 480px) {
            @content;
        }
    }
    @if $point==600 {
        @media (min-width: 600px) {
            @content;
        }
    }
    @if $point==768 {
        @media (min-width: 768px) {
            @content;
        }
    }
    @if $point==1024 {
        @media (min-width: 1024px) {
            @content;
        }
    }
    @if $point==1140 {
        @media (min-width: 1140px) {
            @content;
        }
    }
    @if $point==1280 {
        @media (min-width: 1280px) {
            @content;
        }
    }
    @if $point==1500 {
        @media (min-width: 1500px) {
            @content;
        }
    }
}