Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// ----
// libsass (v3.2.5)
// ----

$mq-mobile-portrait     : 320px !default;
$mq-mobile-landscape    : 568px !default;
$mq-tablet-portrait     : 768px !default;
$mq-tablet-landscape    : 1024px !default;
$mq-desktop             : 1382px !default;

// Both portrait and landscape
@mixin mobile {
    @media (max-width : $mq-mobile-landscape) {
        @content;
    }
}

// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
@mixin mobile-portrait {
    @media (max-width : $mq-mobile-portrait) {
        @content;
    }
}

// Everything up to and including the mobile portrait
@mixin mobile-portrait-down {
    @media (max-width : $mq-mobile-portrait) {
        @content;
    }
}

// Everything above and including the mobile portrait
@mixin mobile-portrait-up {
    @media (min-width : $mq-mobile-portrait) {
        @content;
    }
}

// Everthing larger than a portrait mobile up until mobile landscape
@mixin mobile-landscape {
    @media only screen and (min-width : $mq-mobile-portrait + 1) and (max-width : $mq-mobile-landscape) {
        @content;
    }
}

// Everything up to and including the mobile landscape width
@mixin mobile-landscape-down {
    @media only screen and (max-width : $mq-mobile-landscape) {
        @content;
    }
}

// Everything above and including the mobile landscape width
@mixin mobile-landscape-up {
    @media only screen and (min-width : $mq-mobile-portrait + 1) {
        @content;
    }
}

// Both the portrait and landscape width of the tablet
// Larger than a landscape mobile but less than or equal to a landscape tablet
@mixin tablet {
    @media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-landscape) {
        @content;
    }
}

// Everything larger than mobile landscape up until the portrait width of the tablet
@mixin tablet-portrait {
    @media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-portrait) {
        @content;
    }
}

// Everything down and including the portrait width of the tablet
@mixin tablet-portrait-down {
    @media only screen and (max-width : $mq-tablet-portrait) {
        @content;
    }
}

// Everything above and including the portrait width of the tablet
@mixin tablet-portrait-up {
    @media only screen and (min-width : $mq-mobile-landscape + 1) {
        @content;
    }
}

// Larger than portrait but less than or equal to the landscape width
@mixin tablet-landscape {
    @media only screen and (min-width : $mq-tablet-portrait + 1) and (max-width : $mq-tablet-landscape) {
        @content;
    }
}

// Up to and including the tablet landscape
@mixin tablet-landscape-down {
    @media only screen and (max-width : $mq-tablet-landscape) {
        @content;
    }
}

// Everything larger than portrait tablet
@mixin tablet-landscape-up {
    @media only screen and (min-width : $mq-tablet-portrait + 1) {
        @content;
    }
}

// Everything larger than a landscape tablet
@mixin desktop-up {
    @media only screen and (min-width : $mq-tablet-landscape + 1) {
        @content;
    }
}

// Everything down and including the desktop 
@mixin desktop-down {
    @media only screen and (max-width : $mq-desktop) {
        @content;
    }
}

// Everything larger than a landscape tablet but less than or equal to the desktop
@mixin desktop {
    @media only screen and (min-width : $mq-tablet-landscape + 1) and (max-width : $mq-desktop) {
        @content;
    }
}

// Retina screens have a 1.5 pixel ratio, not 2
@mixin retina {
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
        @content;
    }
}

// RIGHT USAGE: 
.item-detail  {
	&_link  {
		&--active {
		  color: red;
		  @include tablet { color: black; }
		  @include desktop-up { color: orange; }
		}
  }
}

// WRONG USAGE: 
.wrong-item-detail  {
	&_link {
	  &--active {
		  color: red;
  	}
  	@include tablet { 
  	  &--active {
  	    color: black;
  	  }
  	}
  	@include desktop-up { 
  	  &--active {
  	    color: orange;
  	  }
  	}
	}
	
	
}

SassMeister-output.css

.item-detail_link--active {
  color: red;
}

@media only screen and (min-width: 569px) and (max-width: 1024px) {
  .item-detail_link--active {
    color: black;
  }
}

@media only screen and (min-width: 1025px) {
  .item-detail_link--active {
    color: orange;
  }
}

.wrong-item-detail_link--active {
  color: red;
}

@media only screen and (min-width: 569px) and (max-width: 1024px) {
  .wrong-item-detail_link--active {
    color: black;
  }
}

@media only screen and (min-width: 1025px) {
  .wrong-item-detail_link--active {
    color: orange;
  }
}