atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Hexo</title>
  
  
  <link href="//atom.xml" rel="self"/>
  
  <link href="http://yoursite.com/"/>
  <updated>2017-10-12T08:43:35.499Z</updated>
  <id>http://yoursite.com/</id>
  
  <author>
    <name>John Doe</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>myfirstblog</title>
    <link href="http://yoursite.com/2017/10/12/myfirstblog/"/>
    <id>http://yoursite.com/2017/10/12/myfirstblog/</id>
    <published>2017-10-12T03:07:30.000Z</published>
    <updated>2017-10-12T08:43:35.499Z</updated>
    
    <content type="html"><![CDATA[<h1 id="MyFirstText"><a href="#MyFirstText" class="headerlink" title="MyFirstText"></a>MyFirstText</h1><p>This my first text on my first blog.So I am exciting about<br>this thing.</p><hr><h1 id="Unordered-list"><a href="#Unordered-list" class="headerlink" title="Unordered list"></a>Unordered list</h1><ul><li>the first one</li><li>the second one</li><li>the third one</li></ul><h1 id="ordered-list"><a href="#ordered-list" class="headerlink" title="ordered list"></a>ordered list</h1><ol><li>the first one</li><li>the second one</li><li>the third one</li></ol><blockquote><p>this is an example of references</p></blockquote><h1 id="insert-link"><a href="#insert-link" class="headerlink" title="insert link"></a>insert link</h1><p><a href="http://www.baidu.com" target="_blank" rel="external">Baidu</a></p><h1 id="insert-image"><a href="#insert-image" class="headerlink" title="insert image"></a>insert image</h1><p><img src="http://mouapp.com/Mou_128.png" alt="Mou icon"></p><h1 id="Bold-and-Italic"><a href="#Bold-and-Italic" class="headerlink" title="Bold and Italic"></a>Bold and Italic</h1><p><strong>这是粗体</strong>  <em>这是斜体</em></p><h1 id="table"><a href="#table" class="headerlink" title="table"></a>table</h1><table><thead><tr><th style="text-align:left">Name</th><th style="text-align:left">Password</th></tr></thead><tbody><tr><td style="text-align:left">xiaoyu</td><td style="text-align:left">xiaobing</td></tr><tr><td style="text-align:left">xiaobing</td><td style="text-align:left">xiaoyu</td></tr></tbody></table><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">public class HelloWorld &#123;</div><div class="line">    public static void main(String[] args) &#123;</div><div class="line">      System.out.println(&quot;Hello,World&quot;);</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>]]></content>
    
    <summary type="html">
    
      
      
        &lt;h1 id=&quot;MyFirstText&quot;&gt;&lt;a href=&quot;#MyFirstText&quot; class=&quot;headerlink&quot; title=&quot;MyFirstText&quot;&gt;&lt;/a&gt;MyFirstText&lt;/h1&gt;&lt;p&gt;This my first text on my first blo
      
    
    </summary>
    
    
      <category term="other" scheme="http://yoursite.com/tags/other/"/>
    
  </entry>
  
  <entry>
    <title>辨析 Sass 中的 Map 和 List</title>
    <link href="http://yoursite.com/2015/10/21/demo/"/>
    <id>http://yoursite.com/2015/10/21/demo/</id>
    <published>2015-10-21T02:34:12.000Z</published>
    <updated>2017-10-12T01:08:42.851Z</updated>
    
    <content type="html"><![CDATA[<p>如果你使用过 Sass 3.3 之前的版本，那么你一定对那段时光颇有感触，那时候没有现如今这么好的条件，那时候的 Map 还只能用多重列表（lists of list）来模拟。多重列表可以实现复杂数据的嵌套定义，但却不是以键值对的形式实现的，所有当我们需要获取其中特定的某一项时就会比较麻烦。Map 这种数据类型天生就是基于键值对的形式，非常便于组织数据。</p><p>自从可以使用 Map 之后，开发者们开始毫无顾忌地定义 Map 存储数据，比如断点宽度、颜色值、栅格布局等等响应式排版的细节，都被一股脑的塞进了 Map 中。</p><p>那么，有了 Map 之后，我们还有必要使用 List 吗？可能某些人会觉得为了保持向后兼容应该继续使用多重列表模拟 Map，因为可能有些开发者仍然在使用老版本的 Sass 编译器，但实际上，这是多此一举了，Sass 的版本通常由 <code>package.json</code> 或者其他同类型的项目配置文件所控制，往往只需一条命令（<code>gem update sass</code>）即可更新 Sass 的版本，因此基本上无需考虑对老版本的兼容问题。</p><a id="more"></a><p>使用多重列表替代 Map 的优势之一就是减少代码量。下面让我们来比较一下多种列表和 Map 的语法结构以及遍历方式。</p><h2 id="测试表格"><a href="#测试表格" class="headerlink" title="测试表格"></a>测试表格</h2><table><thead><tr><th>Variable</th><th>Description</th></tr></thead><tbody><tr><td><code>site</code></td><td>Sitewide information.</td></tr><tr><td><code>page</code></td><td>Page specific information and custom variables set in front-matter.</td></tr><tr><td><code>config</code></td><td>Site configuration</td></tr><tr><td><code>theme</code></td><td>Theme configuration. Inherits from site configuration.</td></tr><tr><td><code>_</code> (single underscore)</td><td><a href="http://lodash.com/" target="_blank" rel="external">Lodash</a> library</td></tr><tr><td><code>path</code></td><td>Path of current page</td></tr><tr><td><code>url</code></td><td>Full URL of current page</td></tr><tr><td><code>env</code></td><td>Environment variables</td></tr></tbody></table><h2 id="语法比较"><a href="#语法比较" class="headerlink" title="语法比较"></a>语法比较</h2><div class="note"><br>    <h5>测试标题</h5><br>    <p>在下面的示例中，我创建了一个用于控制响应式布局的数据，该数据一共有四个断点，每一个断点都包含了 <code>min-width</code>、<code>max-width</code>、<code>font-size</code> 和 <code>line-height</code> 四个样式。</p><br></div><h4 id="Map-语法"><a href="#Map-语法" class="headerlink" title="Map 语法"></a>Map 语法</h4><p>下面就是使用 Map 存储的数据，具体来说，该 Map 中首先存储了四个用于标识断点的 Key，相对应的是保存具体属性值得 Value。虽然这种形式可读性更高，但是总体代码量却高达 26 行 450 个字符。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line">$breakpoint-map: (</div><div class="line">    small: (</div><div class="line">        min-width: null,</div><div class="line">        max-width: 479px,</div><div class="line">        base-font: 16px,</div><div class="line">        vertical-rhythm: 1.3</div><div class="line">    ),</div><div class="line">    medium: (</div><div class="line">        min-width: 480px,</div><div class="line">        max-width: 959px,</div><div class="line">        base-font: 18px,</div><div class="line">        vertical-rhythm: 1.414</div><div class="line">    ),</div><div class="line">    large: (</div><div class="line">        min-width: 960px,</div><div class="line">        max-width: 1099px,</div><div class="line">        base-font: 18px,</div><div class="line">        vertical-rhythm: 1.5</div><div class="line">    ),</div><div class="line">    xlarge: (</div><div class="line">        min-width: 1100px,</div><div class="line">        max-width: null,</div><div class="line">        base-font: 21px,</div><div class="line">        vertical-rhythm: 1.618</div><div class="line">    )</div><div class="line">);</div></pre></td></tr></table></figure><h4 id="多重列表语法"><a href="#多重列表语法" class="headerlink" title="多重列表语法"></a>多重列表语法</h4><p>下面的多重列表存储了和上面 Map 同样的数据，在多重列表中没有 Key-Value 的对应关系，这意味着要想找到特定的值，必须使用遍历或 <code>nth()</code> 的方式来实现了。从另一个角度来看，多种列表又比 Map 的代码量小得多，总共只有六行 180 个字符。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">$breakpoint-list: (</div><div class="line">    (small, null, 479px, 16px, 1.3),</div><div class="line">    (medium, 480px, 959px, 18px, 1.414),</div><div class="line">    (large, 960px, 1099px, 18px, 1.5),</div><div class="line">    (xlarge, 1100px, null, 21px, 1.618)</div><div class="line">);</div></pre></td></tr></table></figure><h2 id="遍历比较"><a href="#遍历比较" class="headerlink" title="遍历比较"></a>遍历比较</h2><div class="note info"><br>    <h5>测试标题</h5><br>    <p>从上面简单地比较中可以粗略的看出，多种列表的代码量明显少于 Map。但是，如果我们需要遍历这些值得话，复杂度又是怎样的呢？</p><br></div><h4 id="遍历-Map"><a href="#遍历-Map" class="headerlink" title="遍历 Map"></a>遍历 Map</h4><p>我们可以使用如下的代码遍历 Map：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">@each $label, $map in $breakpoint-map &#123;&#125;</div></pre></td></tr></table></figure><p>这里的变量 <code>$label</code> 和 <code>$map</code> 会随着对 <code>$breakpoint-map</code> 的遍历被动态地赋值，<code>$label</code> 将会被赋值为 <code>$breakpoint-map</code> 的 Key，而 <code>$map</code> 会被赋值为 <code>$breakpoint-map</code> 的 Value。为了在遍历过程中获取特定值，我们就需要使用 Sass 原生的 <code>map-get()</code> 函数，使用该函数需要传入两个参数：Map 的名字和求取的 Key，最后返回该 Map 中匹配该 Key 的 Value。</p><p>具体的做法就是使用 <code>@each</code> 遍历 Map，然后使用 <code>map-get()</code> 获取特定值，最终只需要六行代码 220 个字符即可完成整个遍历：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">@each $label, $map in $breakpoint-map &#123;</div><div class="line">    $min-width: map-get($map, min-width);</div><div class="line">    $max-width: map-get($map, max-width);</div><div class="line">    $base-font: map-get($map, base-font);</div><div class="line">    $vertical-rhythm: map-get($map, vertical-rhythm);</div><div class="line">&#125;</div></pre></td></tr></table></figure><h4 id="遍历多重列表"><a href="#遍历多重列表" class="headerlink" title="遍历多重列表"></a>遍历多重列表</h4><p>遍历多重列表不必像遍历 Map 一样动态获取到 Map 后再使用 <code>map-get()</code> 函数取特定值，直接遍历一遍即可获得特定值。</p><p>因为多种列表内层的每一个列表结构相同，都有按照相同顺序排列的五个值，所以我们可以持续遍历每个值并赋值给特定的变量。无需调用 <code>map-get()</code>，直接引用这些变量即可进行赋值等裸机操作。最终遍历多重列表只使用了两行代码 100 个字符：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">@each $label, $min-width, $max-width, $base-font, $vertical-rhythm in $breakpoint-list &#123;</div><div class="line">&#125;</div></pre></td></tr></table></figure><h2 id="慎用多重列表"><a href="#慎用多重列表" class="headerlink" title="慎用多重列表"></a>慎用多重列表</h2><div class="note warning"><br>    <h5>测试标题</h5><br>    <p>经过上述的比对，看起来多重列表各方面都在碾压 Map，实则不然，Sass 中添加 Map 有一条非常重要的原因就是：Key-Value 的映射关系。</p><br></div><h4 id="遗漏键值"><a href="#遗漏键值" class="headerlink" title="遗漏键值"></a>遗漏键值</h4><p>如果要使用多重列表，那么就必须保证自己非常熟悉多重列表内部的每一项所代表的意义。下面我们举个例子，来看看遗漏了某些值的情况：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">$breakpoint-list: (</div><div class="line">    (small, null, 479px, 16px, 1.3),</div><div class="line">    (medium, 480px, 959px, 18px, 1.414),</div><div class="line">    (large, 960px, 1099px, 18px, 1.5),</div><div class="line">    (xlarge, 1100px, 21px, 1.618)</div><div class="line">);</div><div class="line"></div><div class="line">p &#123;</div><div class="line">    @each $label, $min-width, $max-width, $base-font, $vertical-rhythm in $breakpoint-list &#123;</div><div class="line">        @if $min-width &#123;</div><div class="line">            @include breakpoint( $min-width ) &#123;</div><div class="line">                font-size: $base-font;</div><div class="line">                line-height: $vertical-rhythm;</div><div class="line">            &#125;</div><div class="line">        &#125; @else &#123;</div><div class="line">            font-size: $base-font;</div><div class="line">            line-height: $vertical-rhythm;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure><p>当我们尝试运行这段代码时，结果肯定是错误地，因为在 <code>$breakpoint-list</code> 的最后一行，<code>xlarge</code> 被赋值给了 <code>$label</code>，<code>1100px</code> 被赋值给了 <code>$min-width</code>，<code>21px</code> 被赋值给了 <code>$max-width</code>, <code>1.618</code> 被赋值给了 <code>$base-font</code>，最终导致 <code>$vertical-rhythm</code> 没有被赋值，结果就是 <code>font-size</code> 的属性值是错的，<code>line-height</code> 的属性值是空的。此外，Sass 还不会对此抛出错误，导致我们无从知晓错误所在。</p><p>如果我们使用 Map 来代替这里的多重列表，那么使用 <code>map-get()</code> 函数即使遇见空值也能正确获得想要的结果。这就是值得我们慎重思考的地方：多种列表虽然简单快速，但是丧失了 Map 中的容错能力和快速取值能力。</p><h4 id="查找特定列表"><a href="#查找特定列表" class="headerlink" title="查找特定列表"></a>查找特定列表</h4><p>在多重列表中查找特定列表简直就是一种折磨。如果使用 Map，那么配合 <code>map-get()</code> 函数可以快速定位到特定子 Map：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$medium-map: map-get($maps, medium);</div></pre></td></tr></table></figure><p>但如果要获取多种列表 <code>medium</code> 列表，麻烦可就大了：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">@function get-list($label) &#123;</div><div class="line">    @each $list in $breakpoint-list &#123;</div><div class="line">        @if nth($list, 1) == $label &#123;</div><div class="line">            @return $list;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">    @return null;</div><div class="line">&#125;</div><div class="line">$medium-list: get-list(medium);</div></pre></td></tr></table></figure><p>这段代码的逻辑就是遍历整个多重列表，知道找到第一个匹配项，然后返回，如果一直没有找到匹配项，就一直遍历到末尾，然后返回 <code>null</code>。这实际上就是手工实现了 <code>map-get()</code> 的逻辑。</p><h4 id="缺少原生的-Map-函数"><a href="#缺少原生的-Map-函数" class="headerlink" title="缺少原生的 Map 函数"></a>缺少原生的 Map 函数</h4><p>Sass 提供了诸多的原生函数用于处理 Map 数据类型，但是多重列表是没法调用这些函数的，比如，使用 <code>map-merge()</code> 可以合并两个 Map，如果两个 Map 有相同的值，则取第二个 Map 的值为最终值。当然你也可以在多重列表中使用 <code>join()</code> 或 <code>append()</code> 来增加新列表，从而模拟出 <code>map-merge()</code> 的效果。</p><p>另一个实用的 Map 函数就是 <code>map-has-key()</code>，对于依赖 <code>map-get()</code> 的自定义函数来说，<code>map-has-key()</code> 可以用来验证特定的 Key 是否存在。但在列表中是完全没有相似的方法。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><div class="note unreleased"><br>    <h5>Test Title</h5><br>    <p>相比起列表来说，Key-Value 模型的 Map 显然更有力量，原生的 Sass Map 函数更是提供了强力的数据查找和验证工具。</p><br></div><p>虽然多重列表代码量少，但并不能像 Map 一样进行错误检查或验证参数。在大多数时候，相比较多重列表而言，我相信 Map 是更好的选择。如果是为了更少的代码量和其他简单地调用，那么我偶尔会用用多重列表，但是从项目的宏观控制和数据存储方面显然更优秀。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;如果你使用过 Sass 3.3 之前的版本，那么你一定对那段时光颇有感触，那时候没有现如今这么好的条件，那时候的 Map 还只能用多重列表（lists of list）来模拟。多重列表可以实现复杂数据的嵌套定义，但却不是以键值对的形式实现的，所有当我们需要获取其中特定的某一项时就会比较麻烦。Map 这种数据类型天生就是基于键值对的形式，非常便于组织数据。&lt;/p&gt;
&lt;p&gt;自从可以使用 Map 之后，开发者们开始毫无顾忌地定义 Map 存储数据，比如断点宽度、颜色值、栅格布局等等响应式排版的细节，都被一股脑的塞进了 Map 中。&lt;/p&gt;
&lt;p&gt;那么，有了 Map 之后，我们还有必要使用 List 吗？可能某些人会觉得为了保持向后兼容应该继续使用多重列表模拟 Map，因为可能有些开发者仍然在使用老版本的 Sass 编译器，但实际上，这是多此一举了，Sass 的版本通常由 &lt;code&gt;package.json&lt;/code&gt; 或者其他同类型的项目配置文件所控制，往往只需一条命令（&lt;code&gt;gem update sass&lt;/code&gt;）即可更新 Sass 的版本，因此基本上无需考虑对老版本的兼容问题。&lt;/p&gt;
    
    </summary>
    
    
      <category term="css" scheme="http://yoursite.com/tags/css/"/>
    
  </entry>
  
</feed>