Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Generated by SassMeister.com.

View sam-queries.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14
.test {
color: orange;
}
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
.test {
color: pink;
}
}
 
@media only screen {
.test {
color: blue;
}
}
View sam-queries.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
// ----
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.