Generated by SassMeister.com.

input.scss

$breakpoint-tablet: 768px;
$breakpoint-desktop: 1280px;
$breakpoint-gap: 0.02px;

$mobile-only: "(max-width: #{$breakpoint-tablet - $breakpoint-gap})";
$tablet-only: "(min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - $breakpoint-gap})";
$desktop-only: "(min-width: #{$breakpoint-desktop})";
$not-mobile: "(min-width: #{$breakpoint-tablet})";
$not-desktop: "(max-width: #{$breakpoint-desktop - $breakpoint-gap})";

.block {
	color: red;
	@media #{$mobile-only} {
		color: orangered;
	}
	@media #{$tablet-only} {
		color: orange;
	}
	@media #{$desktop-only} {
		color: yellow;
	}
	@media #{$not-mobile} {
	color: yellowgreen;
	}
	@media #{$not-desktop} {
		color: green;
	}
}

output.css

.block {
  color: red;
}
@media (max-width: 767.98px) {
  .block {
    color: orangered;
  }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .block {
    color: orange;
  }
}
@media (min-width: 1280px) {
  .block {
    color: yellow;
  }
}
@media (min-width: 768px) {
  .block {
    color: yellowgreen;
  }
}
@media (max-width: 1279.98px) {
  .block {
    color: green;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}