Skip to content

Instantly share code, notes, and snippets.



Last active Dec 30, 2015
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
@mixin respond($size, $type:min-width) {
@media only screen and ($type: $size) {

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