I am wondering if there is a way to write media queries in sass, so I can give a certain style between let's say: 300px to 900px
in css it looks like this
@media only screen and (min-width: 300px) and (max-width: 900px){
}I know I can write
@media (max-width: 900px)in sass but how to make that range?
25 Answers
$small: 300px;
$medium: 900px;
.smth { //some CSS @media screen and (max-width: $small) { //do Smth } @media screen and (min-width: $medium) { //do Smth }
}Something like this?
1This is what I use for a Mixin with sass, it allows me to quickly reference the breakpoint that I want. obviously you can adjust the media query list to suite your project mobile fist etc.
But it will jin multiple queries for you as I believe you're asking for.
$size__site_content_width: 1024px;
/* Media Queries */ Not necessarily correct, edit these at will
$media_queries : ( 'mobile' : "only screen and (max-width: 667px)", 'tablet' : "only screen and (min-width: 668px) and (max-width: $size__site_content_width)", 'desktop' : "only screen and (min-width: ($size__site_content_width + 1))", 'retina2' : "only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)", 'retina3' : "only screen and (-webkit-min-device-pixel-ratio: 3) and (min-resolution: 288dpi)", 'landscape' : "screen and (orientation:landscape) ", 'portrait' : "screen and (orientation:portrait) "
);
@mixin for_breakpoint($breakpoints) { $conditions : (); @each $breakpoint in $breakpoints { // If the key exists in the map $conditions: append( $conditions, #{inspect(map-get($media_queries, $breakpoint))}, comma ); } @media #{$conditions} { @content; }
}Use it like this in your scss:
#masthead { background: white; border-bottom:1px solid #eee; height: 90px; padding: 0 20px; @include for_breakpoint(mobile desktop) { height:70px; position:fixed; width:100%; top:0; }
}Then this will compile to:
#masthead { background: white; border-bottom: 1px solid #eee; height: 90px; padding: 0 20px;
}
@media only screen and (max-width: 667px), only screen and (min-width: 1025px) { #masthead { height: 70px; position: fixed; width: 100%; top: 0; }
}Check this out for scss.
Usage
.container { @include xs { background: blue; } @include gt-md { color: green } }Demo: Stackblitz
Based on Angular FlexLayout MediaQueries
$small: 300px;
$medium: 900px;
@media screen and (min-width: $small) and (max-width: $medium) { //css code
}The @media rule does all of the above and more. In addition to allowing interpolation, it allows SassScript expressions to be used directly in the feature queries.
When possible, Sass will also merge media queries that are nested within one another to make it easier to support browsers that don’t yet natively support nested @media rules.
$layout-breakpoint-small: 960px;
.smth { display: none; @media (min-width: $layout-breakpoint-small) { display: block; }
}<div></div>
