如何使用SASS进行媒体查询？

我已经阅读了SASS文档，只能找到如何使用scss语法而不是SASS语法进行媒体查询（SASS是一种没有大括号或分号的严格空格）。如何使用sass语法进行媒体查询

我更喜欢只在某些属性中应用它，例如

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

.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

---

它看起来是一个使用sass mixin的好地方

您可以使用sass@content在“方括号”中加载所有内容（在我的例子中是在mixin use声明缩进中）

这里有我用于处理媒体查询的sass mixin结构。它是以一种给你实现自由的方式写的

您可以进行一些自定义配置预设，并使用它，如果这是你想要的，或者你可以自定义它，你喜欢。即使您可以找到许多不同的媒体查询混合处理程序，我个人还是更喜欢将值注入混合，而不是在混合结构中定义它们

这是因为两个原因。我们可以针对特定于设备的宽度或高度，也可以简单地尝试在没有宽度断点的情况下使其看起来很好。有时，这只是更方便和更好的解决方案，这就是为什么我们需要一个混合，让我们充分的灵活性

\u 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...."

// 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)

@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

\u variables.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...."

// 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)

@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

main.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...."

// 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)

@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