Scss mixins

mixins.scss

/* ================================================================================
Типографика в rem ### @include font-size(14px);
================================================================================ */ 
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

/* ================================================================================
Font-face ### @include fontFace('Roboto', 'fonts/roboto');
================================================================================ */ 
@mixin fontFace($family,$src,$style: normal,$weight: normal) {
    @font-face {
        font-family: $family;
        src: url('#{$src}.eot'); // IE9 compat
        src:
            url('#{$src}.eot?#iefix') format('embedded-opentype'), // IE8 and below
            url('#{$src}.woff2') format('woff2'),
            url('#{$src}.woff') format('woff'), // standards
            url('#{$src}.ttf') format('truetype'), // Safari, Android, iOS
            url('#{$src}.svg##{$family}') format('svg'); // legacy iOS
        font-style: $style;
        font-weight: $weight;
    }
}

/* ================================================================================
Кроссбраузерная прозрачность ### @include opacity(0.8);
================================================================================ */ 
@mixin opacity($opacity) {
    filter:         alpha(opacity=($opacity * 100));
    -ms-filter:     "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + ($opacity * 100) + ")";
    -moz-opacity:   $opacity;
    -khtml-opacity: $opacity;
    opacity:        $opacity;
}

/* ================================================================================
Clearfix ### @extend %clearfix;
================================================================================ */ 
%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

/* ================================================================================
Визуально скрыть элемент ### @extend %hidden;
================================================================================ */ 
%hidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/* ================================================================================
Вертикальный градиент
================================================================================ */ 
@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
    background-color: $startColor;
    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
    background-image: -webkit-linear-gradient(top, $startColor, $endColor);
    background-image:    -moz-linear-gradient(top, $startColor, $endColor);
    background-image:     -ms-linear-gradient(top, $startColor, $endColor);
    background-image:      -o-linear-gradient(top, $startColor, $endColor);
    background-image:         linear-gradient(top, $startColor, $endColor);
    filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}

/* ================================================================================
Горизонтальный градиент
================================================================================ */ 
@mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) {
    background-color: $startColor;
    background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
    background-image: -webkit-linear-gradient(left, $startColor, $endColor);
    background-image:    -moz-linear-gradient(left, $startColor, $endColor);
    background-image:     -ms-linear-gradient(left, $startColor, $endColor);
    background-image:      -o-linear-gradient(left, $startColor, $endColor);
    background-image:         linear-gradient(left, $startColor, $endColor);
    filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1');
}

/* ================================================================================
Радиальный градиент
================================================================================ */ 
@mixin background-radial($startColor: #FFFFFF, $startPos: 0%, $endColor: #000000, $endPos:100%) {
    background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos,$startColor), color-stop($endPos,$endColor));
    background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos,$endColor $endPos);
    background: -o-radial-gradient(center, ellipse cover, $startColor $startPos,$endColor $endPos);
    background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos,$endColor $endPos);
    background: radial-gradient(ellipse at center, $startColor $startPos,$endColor $endPos);
}

/* ================================================================================
Background-opacity
================================================================================ */ 
@mixin background-opacity($color: #000, $opacity: 0.85) {
  background: $color;
  background: rgba($color, $opacity);
}

/* ================================================================================
Border-radius
================================================================================ */ 
@mixin border-radius($radius: 5px) {
    -moz-border-radius:    $radius;
    -webkit-border-radius: $radius;
    border-radius:         $radius;
}

@mixin border-radius-separate($topLeftRadius: 5px, $topRightRadius: 5px, $bottomLeftRadius: 5px, $bottomRightRadius: 5px) {
    -webkit-border-top-left-radius:     $topLeftRadius;
    -webkit-border-top-right-radius:    $topRightRadius;
    -webkit-border-bottom-right-radius: $bottomRightRadius;
    -webkit-border-bottom-left-radius:  $bottomLeftRadius;

    -moz-border-radius-topleft:     $topLeftRadius;
    -moz-border-radius-topright:    $topRightRadius;
    -moz-border-radius-bottomright: $bottomRightRadius;
    -moz-border-radius-bottomleft:  $bottomLeftRadius;

    border-top-left-radius:     $topLeftRadius;
    border-top-right-radius:    $topRightRadius;
    border-bottom-right-radius: $bottomRightRadius;
    border-bottom-left-radius:  $bottomLeftRadius;
}

/* ================================================================================
Box-shadow
================================================================================ */ 
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

/* ================================================================================
Text-shadow
================================================================================ */ 
@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
    text-shadow: $x $y $blur $color;
}

/* ================================================================================
Box-sizing
================================================================================ */ 
@mixin box-sizing($type: border-box) {
    -webkit-box-sizing:   $type;
    -moz-box-sizing:      $type;
    box-sizing:           $type;
}

/* ================================================================================
Transform
================================================================================ */ 
@mixin transform($transforms) {
       -moz-transform: $transforms;
         -o-transform: $transforms;
        -ms-transform: $transforms;
    -webkit-transform: $transforms;
          transform: $transforms;
}

/* ================================================================================
Rotate
================================================================================ */
@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}

/* ================================================================================
Transition  ### @include transition(all, 1s, ease-in-out);
================================================================================ */
@mixin transition($what: all, $length: 1s, $easing: ease-in-out) {
    -moz-transition:    $what $length $easing;
    -o-transition:      $what $length $easing;
    -webkit-transition: $what $length $easing;
    -ms-transition:     $what $length $easing;
    transition:         $what $length $easing;
}

/* ================================================================================
Appearance
================================================================================ */
@mixin appearance ($value) {
    -webkit-appearance: $value;
       -moz-appearance: $value;
            appearance: $value;
}