A collection of SCSS mixins

_mixins.scss

/**
 * background-image mixin
 * @param  {string} $url   only image name required
 * @param  {string} $pos:  center        background-position: [default]center
 * @param  {string} $size: cover         background-size: [default]cover
 * @param  {string} $rep:  no-repeat     background-repeat: [default]no-repeat
 */
@mixin background-image($url, $pos: center, $size: cover, $rep: no-repeat ) {
    background-image: url('../images/#{$url}');
    background-position: $pos;
    background-repeat: $rep;
    background-size: $size;
}

 /**
 * returns a darkened color with a default optional amount
 * @param $color      hex color code
 * @param $amount:8%  percentage to darker color by
 * @return            darkened color
 */
@function darkenColor($color, $amount:8%) {
    @return darken($color, $amount);
};

/**
 * linear gradient
 * @param  $top     hex color
 * @param  $bottom  hex color
 * @return          returns a simple linear gradient from top to bottom 
 */
@mixin linearGradient($top, $bottom){
    background: $top; /* Old browsers */
    background: -moz-linear-gradient(top,  $top 0%, $bottom 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $top 0%,$bottom 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $top 0%,$bottom 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $top 0%,$bottom 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

/**
 * vertical align with position option
 * @param  {string} $pos:  [default]relative
 */
@mixin vertical-align($pos: relative ) {
    position: $pos;
    top: 50%;
    transform: translateY(-50%);
}

/**
 * transition
 * @param  {string} $prop:  [default]all
 * @param  {string} $dur:  [default]0.2s
 * @param  {string} $timing:  [default]ease
 */
@mixin transition($prop: all, $dur: 0.2s, $timing: ease) {
    transition-property: $prop;
    transition-duration: $dur;
    transition-timing-function: $timing;  
}