Sass Mixins

Border Radius

@mixin border-radius ( $value: 5px ) {
  -webkit-border-radius: $value;
  -moz-border-radius: $value;
  border-radius: $value;
}

// Usage:

div {
  @include border-radius(10px);
}

Box Shaddow

@mixin box-shadow( $h: 10px , $v: 10px , $b: 0px , $s: 0px , $c: #000000 ) {
  -webkit-box-shadow: $h $v $b $s $c;
  -moz-box-shadow: $h $v $b $s $c;
  box-shadow: $h $v $b $s $c;
}

// Usage:

div {
  @include box-shadow(8px, 8px);
}

Button with fade on hover

@mixin ghost-button($font, $font-size, $font-color, $border-size, $border-color, $padding, $transition-speed, $hover-color) {
  display:inline-block;
  text-decoration:none;
  text-transform:uppercase;
  font-family: $font;
  font-size: $font-size;
  color:$font-color;
  border:$border-size solid $border-color;
  padding:$padding;
  -webkit-transition: color $transition-speed, background $transition-speed;
  transition: color $transition-speed, background $transition-speed;
  &:hover {
    background:$border-color;
    color:$hover-color;
  }
}

// Usage:

div {
  @include ghost-button(“Trebuchet”, 12px, #ffffff, 5px, #34dec6, 4px, 300ms, #000000 );
}

Circle

// Used when Border Radius mixin is available

@mixin circle {
  @include border-radius(100%);
}

// Usage:

div {
  @include circle();
}

Flex Box

@mixin flexbox {
  display:-webkit-box; // old
  display:-moz-box; // old
  display:-ms-flexbox; // ie
  display:-webkit-flex; // new
  display:flex; // new
}

// Usage:

div {
  @include flexbox();
}

// Then set up flex value

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -ms-flex:  $values;
  -webkit-flex:  $values;
  flex:  $values;
}

// Usage:

div {
  @include flex(1, 2);
}

// Also, set flex order

@mixin flex-order($order){
  -webkit-box-ordinal-group: $order; // old
  -moz-box-ordinal-group: $order; // old
  -ms-flex-order: $order; // ie
  -webkit-order: $order; // new
  order: $order; // new
}

// Usage:

div {
  @include flex-order(3);
}

// And use flex direction mixin to use Sass’ @if, @else if, and @else statements.
// This combines what could have been two separate mixins into one.

@mixin flex-direction($direction) {
  @if $direction == column {
    -webkit-flex-direction:vertical;
    -moz-flex-direction:vertical;
    -ms-flex-direction:column;
    -webkit-flex-direction:column;
    flex-direction:column;
  }
  @else {
    -webkit-flex-direction:horizontal;
    -moz-flex-direction:horizontal;
    -ms-flex-direction:row;
    -webkit-flex-direction:row;
    flex-direction:row;
  }
}

// Usage:

div {
  @include flex-direction(column);
}

Font size

@mixin font-size($size) {
  font-size:$size;
  font-size: ($size / 16px) * 1rem;
}

// Usage:

div {
  @include font-size(14px);
}

Gradients

// See also http://super-gradient.ib.gs/

// This is a very large mixin, but provides a variety of options

@mixin gradient($start-color, $end-color, $orientation) {
  background: $start-color;
  @if $orientation == vertical {
    // vertical
    background: -moz-linear-gradient(top,  $start-color 0%, $end-color 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start-color), color-stop(100%,$end-color));
    background: -webkit-linear-gradient(top,  $start-color 0%,$end-color 100%);
    background: -o-linear-gradient(top,  $start-color 0%,$end-color 100%);
    background: -ms-linear-gradient(top,  $start-color 0%,$end-color 100%);
    background: linear-gradient(to bottom,  $start-color 0%,$end-color 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
  }
  @else if $orientation == horizontal {
    // horizontal
    background: -moz-linear-gradient(left,  $start-color 0%, $end-color 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,$start-color), color-stop(100%,$end-color));
    background: -webkit-linear-gradient(left,  $start-color 0%,$end-color 100%);
    background: -o-linear-gradient(left,  $start-color 0%,$end-color 100%);
    background: -ms-linear-gradient(left,  $start-color 0%,$end-color 100%);
    background: linear-gradient(to right,  $start-color 0%,$end-color 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  }
  @else {
    // radial
    background: -moz-radial-gradient(center, ellipse cover,  $start-color 0%, $end-color 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$start-color), color-stop(100%,$end-color));
    background: -webkit-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
    background: -o-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
    background: -ms-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
    background: radial-gradient(ellipse at center,  $start-color 0%,$end-color 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
  }
}

// Usage:

div {
  @include gradient(#ff00ff, #ff00cc, vertical);
}

Opacity

/**
 * @param {number} $opacity
 * @example scss
 * .foobar { @include opacity(4) { ... } }
 */
@mixin opacity($opacity) {
  filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
  opacity: $opacity;

  /* Hack IE6 */
  .lt-ie7 & {
    filter : alpha(opacity=#{round($opacity * 100)});
    zoom: 1;
  }
}

Vertical Align

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

// Usage:

div {
  @include vertical-align();
}

xPos

// Position on x axis

@mixin xPos($x) {
  -webkit-transform:translateX($x);
  -moz-transform:translateX($x);
  -ms-transform:translateX($x);
  transform:translateX($x);
}

// Usage:

div {
  @include xPos(50px);
}