How do you do a media query using SASS?

Question

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

Answer 1

It looks like a great place to use sass mixins.

You can use the sass @content to load inside everything within "brackets" (in my case within mixin use declaration indentions)

Here you have the sass mixin structure I use for handling media query. It is written in a way to give you freedom of implementation.

You can make some custom config preset and use it if that's what you want or you can customize it as you please. Even that you can find many different media query mixin handlers, I personally prefer to inject values into the mixins rather than define them within the mixing structure.

This is because of a couple of reasons. We can target device-specific width or height, or we could simply try to make it look good without width breakpoints. Sometimes this is simply more convenient and a better solution which is why we need a mixin that gives us full 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

Answer 2

I prefer to apply 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