Useful SCSS Mixins

mixins.scss

//////* Transition *//////
@mixin transition($property: all, $duration: 0.5s, $easing: ease-out) {
  transition: $property $duration $easing;
}

@mixin delay($duration: 0.5s) {
  transition-delay: $duration;
}

//////* Transforms *//////

/* translate */
@mixin translate($x-axis, $y-axis) {
  transform: translate($x-axis,$y-axis);
}

/* translateX */
@mixin translateX($position) {
  transform: translateX($position);
}

/* translateY */
@mixin translateY($position) {
  transform: translateY($position);
}

/* rotate */
@mixin rotate($angle) {
  transform: rotate($angle);
}

/* scale */
@mixin scale($ratio) {
  transform: scale($ratio);
}

/* Shapes */

/* rectangle */
@mixin rectangle($width, $height) {
  width: $width;
  height: $height;
}

/* square */
@mixin square($width) {
  .rectangle($width, $width);
}

/* circle */
@mixin circle($diameter) {
  .square($diameter);
  border-radius: 100%;
}

//////* Fonts *//////
@mixin font-face($font-family, $file-path, $font-weight, $font-style) {
  @font-face {
    font-family: $font-family;
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
           url('#{$file-path}.woff') format('woff'),
           url('#{$file-path}.woff2') format('woff2'),
           url('#{$file-path}.ttf') format('truetype');
    font-weight: $font-weight;
    font-style: $font-style;
  }
}