sassmediaresponsive

Media queries in Sass


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?


Solution

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