Sass Mixins ( Text, Retina, Linear gradient, Arrow box, Arrow )

gistfile1.sass

/* Default values : (---) */
/* -------------------------------------------------------------------------*/
/* Text */

@mixin text ( $color: ---, $size: ---, $height: ---, $weight: ---, $family: --- ) {
    font-family : $family;
    font-size : $size;
    line-height : $height;
    font-weight : $weight;
    color : $color;
}

/* -------------------------------------------------------------------------*/
/* Retina */

@mixin retina ($file, $type, $width, $height, $repeat: no-repeat) {
    background-image: url('../images/' + $file + '.' + $type);
    background-repeat: $repeat;

    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
        & {
            background-image: url('../images/' + $file + '@2x.' + $type);
            background-size: $width $height;
        }
    }
}

/* -------------------------------------------------------------------------*/
/* Linear gradient */

@mixin gradient ($bottom: ---, $top: ---, $bottom-pos: 0%, $top-pos: 100%) {

    background-image: -ms-linear-gradient(bottom, $bottom $bottom-pos, $top $top-pos);

    background-image: -moz-linear-gradient(bottom, $bottom $bottom-pos, $top $top-pos);

    background-image: -o-linear-gradient(bottom, $bottom $bottom-pos, $top $top-pos);

    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $bottom), color-stop(1, $top));

    background-image: -webkit-linear-gradient(bottom, $bottom $bottom-pos, $top $top-pos);

    background-image: linear-gradient(to top, $bottom $bottom-pos, $top $top-pos);
}

/* -------------------------------------------------------------------------*/
/* Arrow box */

@mixin arrow-box ($side: right, $size: 6px, $position: top, $pos-val: 15px, $bg-color: ---, $border-color: ---) {
	
    position: relative;
    background: $bg-color;
    border: 1px solid $border-color;
    @include border-radius(5px);
	
    &:after, &:before {
        #{$side}: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
    }

    &:after {
	border-color: rgba($bg-color, 0);
	border-#{$side}-color: $bg-color;
	border-width: $size;
	#{$position}: $pos-val;
    	margin-#{$position}: -($size);
    }

    &:before {
	border-color: rgba($border-color, 0);
	border-#{$side}-color: $border-color;
	border-width: ($size + 1);
	#{$position}: $pos-val;
	margin-#{$position}: -($size + 1);
    }
}

/* -------------------------------------------------------------------------*/
/* Arrow */

@mixin arrow ($side: bottom, $size: 6px, $position: left, $pos-val: 17px, $bg-color: ---, $border-color: ---) {
	
    position: relative;

    &:after {
	#{$side}: 0;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba($bg-color, 0);
	border-#{$side}-color: $bg-color;
	border-width: $size;
	#{$position}: $pos-val;
	margin-#{$position}: -($size);
    }
}