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

普通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")

若是你以爲感興趣，能夠嘗試下Eduardo Bouças和Hugo Giraudel的開源做品@include-media

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

👏歡迎其餘同窗分享大家項目中的響應式方案。