useful sass mixins

_mixins.scss

// A simple mixin to give dimensions to a box.
@mixin box($width, $height: $width) {
  width: $width;
  height: $height;
}

// clearfix 
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// opacity for CSS3 & IE8
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity = $opacity-ie); //IE8
}

// Easy and quick CSS positioning
@mixin position($position, $args) {
  @each $o in top right bottom left {
    $i: index($args, $o);
    @if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number {
      #{$o}: nth($args, $i + 1);
    }
  }
  position: $position;
}

// Positioning helpers
@mixin absolute($args: '') {
  @include position(absolute, $args);
}

@mixin fixed($args: '') {
  @include position(fixed, $args);
}

@mixin relative($args: '') {
  @include position(relative, $args);
}

// Implementing CSS rem units with pixel fallback
@mixin font-size($size, $base: 16) {
  font-size: $size; // fallback for old browsers
  font-size: ($size / $base) * 1rem;
}

// font-face
@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.eot');
    src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
    url($file-name + '.woff') format('woff'),
    url($file-name + '.ttf')  format('truetype'),
    url($file-name + '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
  }
}

//center block
@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}