Viewport helpers

gistfile1.txt

/* =================================
  VIEWPORTS HELPERS
================================= */
.show-from {

  &--mobile {
    display: none;
    @include breakpoint($mq-mobile){
      display: initial;
    }
  }
  &--tablet {
    display: none;
    @include breakpoint($mq-tablet){
      display: initial;
    }
  }
  &--destkop {
    display: none;
    @include breakpoint($mq-desktop){
      display: initial;
    }
  }
}

.show-until {

  &--mobile {
    @include breakpoint($mq-mobile){
      display: none;
    }
  }
  &--tablet {
    @include breakpoint($mq-tablet){
      display: none;
    }
  }
  &--destkop {
    @include breakpoint($mq-desktop){
      display: none;
    }
  }
}

$map: (mobile: $mq-mobile, tablet: $mq-tablet, destkop: $mq-desktop);

.show-from {
@each $key, $value in $map {
&--#{$key} {
display: none;
@include breakpoint(#{$value}){
display: initial;
}
}
}
}

.show-until {
@each $key, $value in $map {
&--#{$key} {
@include breakpoint($mq-mobile){
display: none;
}
}
}
}