How do you make a media query using SASS?

Question

I read the SASS documentation and can only find how to make a media query using scss syntax instead of sass syntax (sass is one that has a strict space without curly braces or semicolons). How do you execute a media query using sass syntax?

Answer 1

@media screen and (min-height: 500px) body margin-top: 100px 

Answer 2

I prefer to use it only in certain properties, for example

 .jumbotron h1.pickup @include LATO font-size: 50px color: white !important @media (max-width: 767px) font-size: 36px @media (max-width: 500px) font-size: 30px 

Answer 3

This seems like a great place to use sass mixins.

You can use sass @content to load inside everything in “brackets” (in my case, in the declaration of using mixin)

Here you have the sass mixin structure that I use to handle the multimedia request. It is written to give you freedom of exercise.

You can make some kind of custom preset and use it if that's what you want, or you can customize it as you like. Even if you can find many different mixin mediain handlers, I personally prefer to inject vales into the mixin rather than define them in the mix structure.

There are two reasons for this. We can target a specific width or height of the device, or we could just try to make it look good without a breakpoint width system. Sometimes it’s just a more convenient and better solution, so we need a mixin that gives us complete flexibility.

_mixins.sass

 // mixin =media($type1, $size1: null, $type2: null, $size2: null) @if ($type1) and ($size1) and ($type2) and ($size2) @media ($type1: $size1) and ($type2: $size2) @content @elseif ($type1) and ($size1) and not ($type2) and not ($size2) @media ($type1: $size1) @content @elseif ($type1) and not ($size1) and not ($type2) and not ($size2) $map: $type1 @if map-has-key($map, "type2") and map-has-key($map, "size2") @media (#{map-get($map, "type1")}: #{map-get($map, "size1")}) and (#{map-get($map, "type2")}: #{map-get($map, "size2")}) @content @else @media (#{map-get($map, "type1")}: #{map-get($map, "size1")}) @content // ... add more conditions if aproppriate @else @error "Upsss...." 

_variables.sass

 // width definition (optional) $xs: "30em" $s: "36em" $m: "42em" $ml: "48em" $l: "54em" $xl: "60em" $xxl: "65em" // options - types of restriction (optional) $minw: "min-width" $maxw: "max-width" $minh: "min-height" $maxh: "max-height" // preset configuration (optional) $mobile: ("type1": $minw, "size1": $s) $tablet: ("type1": $minw, "size1": $m) $laptop: ("type1": $minw, "size1": $ml) $desktop: ("type1": $minw, "size1": $l) $tv: ("type1": $minw, "size1": $xxl) $wide: ("type1": $minw, "size1": $m, "type2": $maxh, "size2": $s) 

main.sass

 @import variables @import mixins // use examples1 -------------- using variables +media($minw, $xs) p font-size: 1em padding: 0px // use examples2 -------------- using both varible and string +media($minw, "1000px") p font-size: 2em padding: 10px // use examples3 -------------- using strings only +media("min-width", "62.5em") p font-size: 3em padding: 15px // use examples4 -------------- using predefind configuration +media($tablet) p font-size: 4em padding: 20px