如何使用SASS進行媒體查詢？

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混入一個偉大的地方。

你可以用青菜@content「括號」（中混入使用聲明indencion內我的情況）

內裏一切都加載在這裏你有我用處理媒體查詢薩斯混入結構。它的寫法是爲了給你實施的自由。

您可以製作一些自定義配置預設並使用它，如果這是您想要的，或者您可以根據自己的喜好進行自定義。即使你可以找到許多不同的媒體查詢mixin處理程序，我個人更喜歡將vales注入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