Generated by SassMeister.com.

responsive-and-print-display.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// screen breakpoints can be sourced from the framework you are using
// in my case it is bootstrap
$screen-xs-max: 670px;
$screen-sm-max: 980px;
$screen-md-max: 1200px;

$mobile-max: $screen-xs-max;
$tablet-max: $screen-sm-max;
$laptop-max: $screen-md-max;

@function unit($val, $unit) {
  @return $val * 1#{$unit};
}

@mixin mobile {
  @media screen and (max-width: $mobile-max) {
    @content;
  }
}
  
@mixin tablet {
  @media screen and (min-width: $mobile-max + 1) and (max-width: $tablet-max) {
    @content;
  }
}

@mixin laptop {
  @media screen and (min-width: $tablet-max + 1) and (max-width: $laptop-max) {
    @content;
  }
}

@mixin computer {
  @media screen and (min-width: $laptop-max + 1) {
    @content;
  }
}

@mixin print {
  @media only print {
    @content;
  }
}

// Usage Instructions:
// d-(M|T|L|C|P)-(ib|i|b|n|f|t)
// M: mobile, T: tablet, L: laptop, C: Computer, P: print media
// ib: inline-block, i: inline, b: block, n: none, f: flex, t: table
// Eg:
// display inline on mobile: d-M-i
// display block: d-b
// display flex on computer: d-C-f
//


// display options covered:
$display-options: ib inline-block, i inline, b block, n none, f flex, t table;
@mixin make-display-mixin($breakpoint: all, $i: length($display-options)) {
  $infix: '';
  @if $breakpoint != "all" {
    $infix: '-#{$breakpoint}';
  }
  
  @while $i > 0 {
    $display-option: nth($display-options, $i);
    
    .d#{$infix}-#{nth($display-option,1)}  { display: nth($display-option,2) !important; }

    // reduce counter
    $i: $i - 1;
  }
}


// Use the mixin for each breakpoint
@include make-display-mixin();
@include mobile { @include make-display-mixin(M); }
@include tablet { @include make-display-mixin(T); }
@include laptop { @include make-display-mixin(L); }
@include computer { @include make-display-mixin(C); }
@include print { @include make-display-mixin(P); }