MediaQueryMixin.css

/* Sass Code */
@mixin phone {
  @media screen and (min-width: 480px) {
    @content;
  }
}

@mixin tablet {
  @media screen and (min-width: 768px) {
    @content;
  }
}

html {
  background: red;
  
  @include phone {
      background: white;
  }
  
  @include tablet {
      background: blue;
  }
}

/* Compiled CSS Code */
html {
	background: red;
}

@media screen and (min-width: 480px) {
	html {
		background: white;
	}
}

@media screen and (min-width: 768px) {
	html {
		background: blue;
	}
}