摘要：一些瀏覽器支持嵌套媒體查詢，例如，和但是和目前并沒(méi)有支持嵌套媒體查詢。因此，一方面，我們有一個(gè)斷點(diǎn)管理器從斷點(diǎn)的全局中選擇并處理錯(cuò)誤消息，另一方面有一個(gè)斷點(diǎn)管理器允許使用多查詢條件。

如果你對(duì) Sass不太熟悉的話，你可能不知道Sass增加了許多非常有趣的功能，例如媒體查詢（即 @media）功能（經(jīng)常被成為 Media Merging媒體合并）。

在向你解釋什么是Media Merging之前，你應(yīng)該了解Media Query(媒體查詢)的 css規(guī)范是否允許嵌套媒體查詢。一些瀏覽器支持嵌套媒體查詢，例如：Firefox，Chrome和Opera；但是Safari和Internet Explorer目前并沒(méi)有支持嵌套媒體查詢。

因?yàn)闉g覽器的支持不理想，所以Sass將嵌套的媒體查詢合并到一個(gè)媒體條件中；例如，下面的代碼：

    @media (min-width: 42em) {
      @media (max-width: 1337px) {
        .foo {
          color: red;
        }
      }
    }

將編譯為：

    @media (min-width: 42em) and (max-width: 1337px) {
      .foo {
        color: red;
      }
    }

這樣很方便，有木有？將嵌套的媒體查詢合并到單個(gè)語(yǔ)句中時(shí)，這就是所謂的媒體合并。

上面我已經(jīng)做過(guò)簡(jiǎn)單的介紹了，現(xiàn)在讓我來(lái)談?wù)勎业南敕ǎ夯旧希蚁霕?gòu)建一個(gè)非常簡(jiǎn)單的mixin，它將查詢的映射作為輸入，并將它們合并為@meida 指令中的單個(gè)條件作為輸出。

回到前面的例子，我想這樣寫：

    @mixin media($queries) { .. }
    
    .foo {
      @include media((min-width: 42em, max-width: 1337px)) {
        color: red;
      }
    }

在編譯時(shí)，和上面的 CSS 代碼段中看到的結(jié)果相同，在我的想法中，我可以至少有兩種方式來(lái)創(chuàng)建它，讓我們先來(lái)解決看起來(lái)比較丑的一個(gè)。

最直接的想發(fā)就是構(gòu)建一個(gè)字符串，我們對(duì)每個(gè)新的鍵值對(duì)進(jìn)行迭代

    /// Media query merger (the ugly version)
    /// Create a single media condition out of a map of queries
    /// @param {Map} $queries - Map of media queries
    
    
    @mixin media($queries) {
      $media-condition: ";
      
    
      // Loop over the key/value pairs in $queries
      
      
      @each $key, $value in $queries {
      
        // Create the current media query
        
        
        $media-query: "(" + $key + ": " + $value + ")";
        
        
    
        // Append it to the media condition
        
        
        $media-condition: $media-condition + $media-query;
    
        // If pair is not the last in $queries, add a `and` keyword
        
        
        @if index(map-keys($queries), $key) != length($queries) {
          $media-condition: $media-condition + " and ";
        }
      }
      
    
      // Output the content in the media condition
      
      @media #{$media} {
        @content;
      }
    }

雖然它的功能實(shí)現(xiàn)的很好，但是你必須承認(rèn)，這樣的代碼不是很優(yōu)雅。

當(dāng)Sass 提供這樣一種優(yōu)雅的方式來(lái)處理媒體查詢時(shí)，我并不覺得操作字符串的感覺很舒服?？隙ㄟ€有一個(gè)更好的方法來(lái)做到這一點(diǎn)。然后他激發(fā)了我：遞歸。根據(jù)字典，遞歸的意思是：

一種定義對(duì)象序列（例如表達(dá)式，函數(shù)或集合）的方法，其中給出一些數(shù)量的初始對(duì)象，并且每個(gè)連續(xù)對(duì)象根據(jù)先前對(duì)象來(lái)定義。

如果我們僅僅是這樣簡(jiǎn)單的理解，遞歸是一個(gè)函數(shù)用不同的參數(shù)一遍又一遍地調(diào)用自己的機(jī)制，直到某一點(diǎn)。那么就有點(diǎn)艱難了。 在JavaScript中使用遞歸的函數(shù)的一個(gè)實(shí)際示例：

    function factorial(num) {
      if (num < 0) return -1;
      else if (num == 0) return 1;
      else return (num * factorial(num - 1));
    }

正如你所看到的，函數(shù)調(diào)用自己，直到num變量小于1，每次運(yùn)行時(shí)減少1。

為什么我要告訴你這個(gè)？我想我們可以使用遞歸來(lái)構(gòu)建我們的媒體條件，使用Sass來(lái)進(jìn)行媒體合并。如果我們使mixin輸出為map中的第一個(gè)查詢媒體，然后調(diào)用自身傳遞map，直到map中沒(méi)有查詢?yōu)橹?。因?yàn)樗悬c(diǎn)復(fù)雜，所以我們要一步一步的走。

首先，如果現(xiàn)在我們的map沒(méi)有更多的的查詢，我們只是輸出內(nèi)容。

    @mixin media($queries) {
      @if length($queries) == 0 {
        @content;
      } @else {
        // ...
      }
    }

現(xiàn)在，我們要在地圖中輸出第一個(gè)媒體查詢的媒體塊。要獲得map的第一個(gè)鍵，我們可以使用nth(..) 和 map-keys(..)函數(shù)。

    $first-key: nth(map-keys($queries), 1);
    
    @media ($first-key: map-get($queries, $first-key)) {
      // ...
    }

到目前為止還挺好，現(xiàn)在，我們只需要使用mixin調(diào)用自己，我們不要傳遞給他相同的$queries，否則我們將面臨一個(gè)無(wú)限循環(huán)。我們需要在刪除第一個(gè)鍵/值對(duì)后傳遞$ query。幸運(yùn)的是，這里還有一個(gè)map-remove（..）函數(shù)。

    $queries: map-remove($queries, $first-key);
    
    @include media($queries) {
      @content;
    }

現(xiàn)在整個(gè)mixin是這樣的：

    /// Media query merger
    /// Create a single media condition out of a map of queries
    /// @param {Map} $queries - Map of media queries
    
    
    @mixin media($queries) {
      @if length($queries) == 0 {
        @content;
      } @else {
        $first-key: nth(map-keys($queries), 1);
    
        @media ($first-key: map-get($queries, $first-key)) {
          $queries: map-remove($queries, $first-key);
    
          @include media($queries) {
            @content;
          }
        }
      }
    }

在前一篇文章中，我們看到了幾種不同的方法來(lái)管理Sass中的響應(yīng)斷點(diǎn)。 在mixin使用的最后一個(gè)版本，如下所示：

    /// Breakpoints map
    /// @type Map
    
    $breakpoints: (
      "small": (min-width: 767px),
      "medium": (min-width: 992px),
      "large": (min-width: 1200px),
    );
    
    
    /// Responsive breakpoint manager
    /// @param {String} $breakpoint - Breakpoint
    /// @requires $breakpoints
    
    
    @mixin respond-to($breakpoint) {
      $media: map-get($breakpoints, $breakpoint);
    
      @if not $media {
        @error "No query could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
      }
    
      @media #{inspect($media)} {
        @content;
      }
    }

這個(gè)mixin像一個(gè)charm，但它不支持多條件查詢，如（min-width：42em）和（max-width：1337px），因?yàn)樗蕾囉趇nspect（..）函數(shù)，只做打印 Sass表示的值。

因此，一方面，我們有一個(gè)斷點(diǎn)管理器從斷點(diǎn)的全局map中選擇并處理錯(cuò)誤消息，另一方面有一個(gè)斷點(diǎn)管理器允許使用多查詢條件。 選擇是困難的。

通過(guò)稍微調(diào)整 respond-to(..) mixin，我們可以使他包括 media(..) mixin，而不是打印一個(gè)@media指令本身。

    @mixin respond-to($breakpoint) {
      // Get the query map for $breakpoints map
      $queries: map-get($breakpoints, $breakpoint);
    
      // If there is no query called $breakpoint in map, throw an error
      @if not $queries {
        @error "No value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
      }
    
      // Include the media mixin with $queries
      @include media($queries) {
        @content;
      }
    }

最好的方法是，如果你已經(jīng)使用了這個(gè)mixin，你可以通過(guò)調(diào)整respond-to（..）和添加 media(..)來(lái)完成包括多重查詢功能，因?yàn)锳PI 根本沒(méi)有改變：respond-to(..) 和以前一樣，仍需要一個(gè)斷點(diǎn)名來(lái)工作。

我必須說(shuō)，我覺得這非常令人興奮，因?yàn)檫@是我第一次找到一個(gè)很好的嵌套的媒體查詢和mixin遞歸的樣例。最后一個(gè)例子：

    // _variables.scss
    
    $breakpoints: (
      "small": (min-width: 767px),
      "small-portrait": (min-width: 767px, orientation: portrait),
      "medium": (min-width: 992px),
      "large": (min-width: 1200px),
    );
    
    
    // _mixins.scss
    
    @mixin media($queries) { .. }
    @mixin respond-to($breakpoint) { .. }
    
    
    // _component.scss
    
    .foo {
      @include respond-to("small-portrait") {
        color: red;
      }
    }

將生成以下的CSS:

    @media (min-width: 767px) and (orientation: portrait) {
      .foo {
        color: red;
      }
    }

作者信息

原文作者：Hugo Giraudel
原文鏈接：https://www.sitepoint.com/sas...
翻譯自MaxLeap團(tuán)隊(duì)_前端研發(fā)人員：Ammie Bai
譯者簡(jiǎn)介：新晉前端一枚，目前負(fù)責(zé) MaxLeap 網(wǎng)站展示性內(nèi)容的實(shí)現(xiàn)。喜歡自己嘗試寫一些js特效小Demo。

相關(guān)文章
無(wú)需Flash實(shí)現(xiàn)圖片裁剪——HTML5中級(jí)進(jìn)階

作者往期佳作
簡(jiǎn)介 jCanvas：當(dāng) jQuery遇上HTML5 Canvas
如何結(jié)合Gulp使用PostCss

想要了解APP制作、開發(fā)？歡迎加入技術(shù)交流QQ群：480843919