Sass Mixin 和 Media Merging

如果你对 Sass不太熟悉的话，你可能不知道Sass增加了许多非常有趣的功能，例如媒体查询（即 @media）功能（经常被成为 Media Merging媒体合并）。

在向你解释什么是Media Merging之前，你应该了解Media Query(媒体查询)的 css规范是否允许嵌套媒体查询。一些浏览器支持嵌套媒体查询，例如：Firefox，Chrome和Opera；但是Safari和Internet Explorer目前并没有支持嵌套媒体查询。

因为浏览器的支持不理想，所以Sass将嵌套的媒体查询合并到一个媒体条件中；例如，下面的代码：

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

将编译为：

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

这样很方便，有木有？将嵌套的媒体查询合并到单个语句中时，这就是所谓的媒体合并。

我们想要什么？Media queries（媒体查询）！

上面我已经做过简单的介绍了，现在让我来谈谈我的想法：基本上，我想构建一个非常简单的mixin，它将查询的映射作为输入，并将它们合并为@meida 指令中的单个条件作为输出。

回到前面的例子，我想这样写：

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

在编译时，和上面的 CSS 代码段中看到的结果相同，在我的想法中，我可以至少有两种方式来创建它，让我们先来解决看起来比较丑的一个。

丑陋的版本

最直接的想发就是构建一个字符串，我们对每个新的键值对进行迭代

    /// 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;
      }
    }

虽然它的功能实现的很好，但是你必须承认，这样的代码不是很优雅。

优雅的方式

当Sass 提供这样一种优雅的方式来处理媒体查询时，我并不觉得操作字符串的感觉很舒服。肯定还有一个更好的方法来做到这一点。然后他激发了我：递归。根据字典，递归的意思是：

一种定义对象序列（例如表达式，函数或集合）的方法，其中给出一些数量的初始对象，并且每个连续对象根据先前对象来定义。

如果我们仅仅是这样简单的理解，递归是一个函数用不同的参数一遍又一遍地调用自己的机制，直到某一点。那么就有点艰难了。在JavaScript中使用递归的函数的一个实际示例：

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

正如你所看到的，函数调用自己，直到num变量小于1，每次运行时减少1。

为什么我要告诉你这个？我想我们可以使用递归来构建我们的媒体条件，使用Sass来进行媒体合并。如果我们使mixin输出为map中的第一个查询媒体，然后调用自身传递map，直到map中没有查询为止。因为他有点复杂，所以我们要一步一步的走。

首先，如果现在我们的map没有更多的的查询，我们只是输出内容。

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

现在，我们要在地图中输出第一个媒体查询的媒体块。要获得map的第一个键，我们可以使用nth(..) 和 map-keys(..)函数。

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

到目前为止还挺好，现在，我们只需要使用mixin调用自己，我们不要传递给他相同的$queries，否则我们将面临一个无限循环。我们需要在删除第一个键/值对后传递$ query。幸运的是，这里还有一个map-remove（..）函数。

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

现在整个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;
          }
        }
      }
    }

更进一步

在前一篇文章中，我们看到了几种不同的方法来管理Sass中的响应断点。在mixin使用的最后一个版本，如下所示：

    /// 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;
      }
    }

这个mixin像一个charm，但它不支持多条件查询，如（min-width：42em）和（max-width：1337px），因为它依赖于inspect（..）函数，只做打印 Sass表示的值。

因此，一方面，我们有一个断点管理器从断点的全局map中选择并处理错误消息，另一方面有一个断点管理器允许使用多查询条件。选择是困难的。

通过稍微调整 respond-to(..) mixin，我们可以使他包括 media(..) mixin，而不是打印一个@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;
      }
    }

最好的方法是，如果你已经使用了这个mixin，你可以通过调整respond-to（..）和添加 media(..)来完成包括多重查询功能，因为API 根本没有改变：respond-to(..) 和以前一样，仍需要一个断点名来工作。

最后的想法

我必须说，我觉得这非常令人兴奋，因为这是我第一次找到一个很好的嵌套的媒体查询和mixin递归的样例。最后一个例子：

    // _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/sass-mixin-media-merging/
翻译自MaxLeap团队_前端研发人员：Ammie Bai
译者简介：新晋前端一枚，目前负责 MaxLeap 网站展示性内容的实现。喜欢自己尝试写一些js特效小Demo。