Question

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

Answer 1

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

Answer 2

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

.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

它看起来像是一个使用sass mixins的好地方。

您可以使用sass @content加载＆＃34;括号内的所有内容＆＃34; （就我的情况而言，在mixin中使用声明缩进）

这里有你用来处理媒体查询的sass mixin结构。它的编写方式可以让您自由实施。

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

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

<强> _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

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

3 个答案: