Hide and show Sass mixins for optimized device performance.

_mixins.scss

@mixin show-it {
  height: auto;
  visibility: visible;
  @include opacity(1); // Compass mixin
}

@mixin hide-it {
  position: absolute;
  -webkit-transform: translate3d(-9999rem,0,0);
  -moz-transform: translate3d(-9999rem,0,0);
  transform: translate3d(-9999rem,0,0);
  @include opacity(0); // Compass mixin
}

// Used in Yeti Media's Castrum grid https://github.com/Yeti-Media/generator-castrum
@mixin respond($size, $type:min-width) {
  @media only screen and ($type: $size) {
    @content;
  }
}

Example usage for iPhone:

@include respond($type: max-width, $size: 48em) {
  .show-if-small {
    @include show-it;
  }
  .hide-if-small {
    @include hide-it;
  }
}