Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.18.0)
// ----

// $bp-min: 300px;
// 
// .test {
//     color: red;
//     @include mq(min, $bp-min){
//         color: blue;    
//     }
// }
// -----------------------------------
// .test2 {
//     color: red;
//     @include mq(min, 300px){
//         color: blue;    
//     }
// }
// -----------------------------------
//  .test3 {
//    color: red;
//    @include mq(min-max, 400px, 800px) {
//     color: blue; 
//    }
//  }


@mixin mq($dimension, $breakpoint, $breakpoint2:false) {
	@if $dimension == min {
		@media screen and (min-width: $breakpoint) {
			@content;
		}		
	} @else if $dimension == max {
		@media screen and (max-width: $breakpoint) {
			@content;
		} 
	} @else if $dimension == min-max {
		@media screen and (min-width: $breakpoint) and (max-width: $breakpoint2) {
			@content;
		}	  
	}
}

.test1 {
  color: green;
  
  @include mq(min, 400px){
    color: #000;
  }
}
.test2 {
  color: blue;
  
  @include mq(max, 800px) {
   color: red; 
  }
}

SassMeister-output.css

.test1 {
  color: green;
}
@media screen and (min-width: 400px) {
  .test1 {
    color: #000;
  }
}

.test2 {
  color: blue;
}
@media screen and (max-width: 800px) {
  .test2 {
    color: red;
  }
}