Skip to content

@storypixel /sam-queries.css
Last active

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Generated by SassMeister.com.
.test {
color: orange;
}
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
.test {
color: pink;
}
}
@media only screen {
.test {
color: blue;
}
}
// ----
// 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.