a useful sass mixin collection

mixins.scss

// -----------------------------------------------------------------------
// 100% Mixin
// -----------------------------------------------------------------------

@mixin cover-all {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// -----------------------------------------------------------------------
// Double Mixins
// -----------------------------------------------------------------------

@mixin doubly($margin: null) {
  & + & {
    margin-left: $margin;
    @content;
  }
}

// -----------------------------------------------------------------------
// Center Mixins
// -----------------------------------------------------------------------

@mixin total-center {
  position: absolute;
  top: 50%;
  left: 50%;
  @include transform(translate(-50%, -50%));
}

@mixin vertical-center {
  position: absolute;
  top: 50%;
  @include transform(translateY(-50%));
}

@mixin horizontal-center {
  position: absolute;
  left: 50%;
  @include transform(translateX(-50%));
}

// -----------------------------------------------------------------------
// Text Mixins
// -----------------------------------------------------------------------

@mixin word-wrap() {
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// -----------------------------------------------------------------------
// Color Mixins
// -----------------------------------------------------------------------

@function black($opacity) {
  @return rgba(black, $opacity)
}

@function white($opacity) {
  @return rgba(white, $opacity)
}

// -----------------------------------------------------------------------
// Retina Mixin
// -----------------------------------------------------------------------

@mixin retina-image($context, $file, $type, $width, $height) {
  background-image: url((asset-path($context + '/' + $file + '.' + $type)));
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (-moz-min-device-pixel-ratio: 2),
      only screen and (-o-min-device-pixel-ratio: 2/1),
      only screen and (min-device-pixel-ratio: 2),
      only screen and (min-resolution: 192dpi),
      only screen and (min-resolution: 2dppx){
      & {
        background-image: url((asset-path($context + '/' + $file + '@2x.' + $type)));
        -webkit-background-size: $width $height;
        -moz-background-size: $width $height;
        -o-background-size: $width $height;
        background-size: $width $height;
    }
  }
}

// -----------------------------------------------------------------------
// Aspect Ratio Mixin
// -----------------------------------------------------------------------

@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
  > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}