Skip to content

Instantly share code, notes, and snippets.

@ntreadway

ntreadway/_mixins.scss

Last active Dec 30, 2015
Embed
What would you like to do?
Hide and show Sass mixins for optimized device performance.
@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;
}
}
@ntreadway

This comment has been minimized.

Copy link
Owner Author

@ntreadway ntreadway commented Dec 5, 2013

Example usage for iPhone:

@include respond($type: max-width, $size: 48em) {
  .show-if-small {
    @include show-it;
  }
  .hide-if-small {
    @include hide-it;
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment