title: How to write media queries in sass?
body: <p>I was trying to figure out ways to write media queries in sass. This is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>devices: ("sphone","phone","tablet")
  $breakpoints: ( width2: ('sphone' : 320, 'phone' : 360, 'tablet' : 600), height2: ('sphone' : 509, 'phone' : 583, 'tablet' : 952))
  
  =screen-width($device)
    @each $name in $devices
      @if $device != $name
        @error "No device of such name"
    $media: (max-width: map-get(map-get($breakpoints,"width2"),$device) + px )
    @media screen only and ($media)
      @content
    
    
  .hello
    background: #333
    @include screen-width("mobile")
      background: #444
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to compile the same in sass but it keeps on throwing me the following error. I don't know why.</p>
  
  <pre><code>Properties are only allowed within rules, directives, mixin includes, or other properties.
  </code></pre>
  
  <p>Any insights?</p>