Generated by SassMeister.com.

sam-queries.css

.test {
  color: orange;
}
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
  .test {
    color: pink;
  }
}

@media only screen {
  .test {
    color: blue;
  }
}

sam-queries.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

// Breakpoints with SASS, my starting point

// Screen sizes
$small-screen: 640px;
$medium-screen: 1024px;
$large-screen: 1440px;
$xlarge-screen: 1920px;

// Ranges
$small: "only screen";
$small-only: "only screen and (max-width:#{$small-screen})";
$medium: "only screen and (min-width:#{$small-screen + 1})";
$medium-only: "only screen and (min-width:#{$small-screen + 1}) and (max-width:#{$medium-screen})";
$large: "only screen and (min-width:#{$medium-screen + 1})";
$large-only: "only screen and (min-width:#{$medium-screen + 1}) and (max-width:#{$large-screen})";
$xlarge: "only screen and (min-width:#{$large-screen + 1})";
$xlarge-only: "only screen and (min-width:#{$large-screen + 1}) and (max-width:#{$xlarge-screen})";
$xxlarge: "only screen and (min-width:#{$xlarge-screen + 1})";

// Usage
.test{
  color: orange;
  @media #{$large-only}{
    color: pink;
  }
}

@media #{$small}{
  .test{
    color: blue;
  }
}