分享一下Sass處理的更高階媒體查詢

PromiseAll發表於2019-05-09

普通css中使用@media 去處理響應式網站開發估計大部分人都遇到過，但是在css預處理如此流行的今天，我們應該學會更敏捷的開發模式，更好的讓他們發揮最大的效率。響應式開發大同小異但是具體處理方案還是很多的，這裡我分享一個比較規範，用起來也比較舒服的scss處理的媒體查詢方案。


具體方案大概是這樣：

先定義一些斷點（也就是我們要界別的裝置尺寸）

// _config.scss
$breakpoints: (
  'xs': 'only screen and ( min-width: 480px)',
  'sm': 'only screen and ( min-width: 768px)',
  'md': 'only screen and ( min-width: 992px)',
  'lg': 'only screen and ( min-width: 1200px)',
) !default;複製程式碼

然後定義mixin:

// _mixins.scss
@mixin respond-to($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);
  // 這裡是scss error提示估計大部分人（包括我）都沒怎麼使用過
  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is 
    defined in `$breakpoints` map.';
  }
   // 具體斷點解釋在這裡，作者比較嚴謹，校驗了$query合法性
  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))}
   {
    @content;
  }
}複製程式碼

這裡解釋一些出現的一些scss函式

字串函式顧名思意是用來處理字串的函式。Sass 的字串函式主要包括兩個函式：

unquote($query)：刪除字串中的引號；
quote($query)：給字串新增引號。
inspect($query) Maps不能轉換為純CSS。作為變數的值或引數傳遞給CSS函式將會導致錯誤。
                使用inspect($query) 函式以產生輸出字串複製程式碼

使用的時候這樣寫：

// _component.scss
.element {
  color: #000;

  @include respond-to(sm) {
    color: #333;
  }
}複製程式碼

最後編譯完成輸出結構是

.element {
  color: #000;
}

@media (min-width: 768px) {
  .element {
    color: #333;
  }
}複製程式碼

這樣當需求更改，導致媒體查詢數值變化的時候，我們只需要改$breakpoints中的值，而不必查詢、替換。並且使用@include可以使我們的程式碼維護容易。

那麼如果我需要定義移動端retina螢幕使用二倍的背景圖，需要怎麼做？
新增加一個斷點，然後使用即可。

$breakpoints: (
  ...
  'xs-retina'  : ( max-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
);複製程式碼

這時候就出現小問題了，如果頁面很複雜，需要新增很多斷點，那麼可能會出現組合爆炸，造成$brekpoints的子項很多很多，除了會影響sass編譯速度之外，維護起來也會更加麻煩。

Sass媒體查詢應該是這樣

  • 動態，可定義，可以隨意增加斷點

  • 簡潔，自然的語法，可以使用 <=,>=, >,< 符號（←_←）比如@include media(">minWidth")

  • 可以自由組合，臨時定義斷點，可以組合多個斷點，也可以臨時自定義斷點，比如@include media(">tablet", "<1280px")

sass-media.gif

如果你覺得感興趣，可以嘗試下Eduardo Bouças和Hugo Giraudel的開源作品@include-media

原文地址：www.v5ant.com/details/PYQ…

?歡迎其他同學分享你們專案中的響應式方案。


相關文章