Generated by SassMeister.com.

Sass media query mixin

@mixin mq($point, $query1: min, $query2: width, $IE9: false) {
    @if $IE9 == true{
        .lt-ie9 & {
            @content;
        }
    }
    
    @if $query1 == "min" {
      $point: $point + 1;
    }

    @media (#{$query1}-#{$query2}: $point / $doc-font-size +em) {
        @content;
    }
}

Sass media query mixin | Output

@media (min-width: 20.0625em) {
  .example {
    width: 100%;
  }
}

@media (min-width: 22.5625em) and (max-width: 30em) {
  .example2 {
    background: red;
  }
}

@media (min-width: 30.0625em) and (max-width: 40em) {
  .col-sm-4.col-md-4 .item {
    font-family: Helvetica;
    line-height: 1.4;
    font-size: 14px;
    padding: 6px 12px 1px;
  }
}

@media (min-width: 50.0625em) and (max-width: 60em) {
  .col-sm-4.col-md-4 .item {
    font-family: Helvetica;
    line-height: 1.4;
    font-size: 14px;
    padding: 6px 12px 1px;
  }
}

.item2 {
  padding: 32px 30px;
}

Sass media query mixin | Sample usage

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

$doc-font-size: 16;
$doc-line-height: 24;

$breakpoint-alpha           : 360;
$breakpoint-beta            : 480;
$breakpoint-gamma           : 640;
$breakpoint-delta           : 768;
$breakpoint-epsilon         : 800;
$breakpoint-zeta            : 960;
$breakpoint-eta             : 1024;
$breakpoint-theta           : 1280;
$breakpoint-iota            : 1440;
$breakpoint-kappa           : 1680;
$breakpoint-lambda          : 1920;

@mixin mq($point, $query1: min, $query2: width, $IE9: false) {
    @if $IE9 == true{
        .lt-ie9 & {
            @content;
        }
    }
    
    @if $query1 == "min" {
      $point: $point + 1;
    }

    @media (#{$query1}-#{$query2}: $point / $doc-font-size +em) {
        @content;
    }
}

@mixin mq-custom-1 {

	@include mq($breakpoint-beta) {
		@include mq($breakpoint-gamma, max) {
			@content;
		}
	}

	@include mq($breakpoint-epsilon) {
		@include mq($breakpoint-zeta, max) {
			@content;
		}
	}
}

.example {
    @include mq(320) {
        width: 100%;
    }
}

.example2 {
    @include mq($breakpoint-alpha) {
        @include mq($breakpoint-beta, max) {
            background: red;
        }
    }
}


.item {
	@include mq-custom-1 {
	    .col-sm-4.col-md-4 & {
  			font-family: Helvetica;
  			line-height: 1.4;
  			font-size: 14px;
  			padding: 6px 12px 1px;
	    }
	}
}

$spacing: 32px;
.item2 {
  padding: $spacing ($spacing - 2);
}