Media queries in Sass

Question

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?

Answer 1

$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?

Answer 2

This 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;   } }