Sass map详解

来源：互联网发布：淘宝直通车有必要开吗编辑：程序博客网时间：2024/05/17 05:57

作为一个CSS预处理器，Sass正受到越来越多的青睐，诸如Github、Codepen、CSS-Tricks、SitePoint、w3cplus等网站采用Sass组织、管理CSS文件，Sass正在逐渐成为事实上的CSS预处理器行业标准。接下来几篇文章，我们来研读下Sass中的关键功能，今天来看map，大家不妨一坐，精彩内容马上呈现。
这里写图片描述

map简介

在Sass中，maps代表一种数据类型，可以包含若干键值对的对象类型，使用()包围一个map，里面的键值对用逗号隔开，键和值可以是任何的Sass数据类型，尽管一个值可以用在多个键上，但是通过一个键我们必须只能找到一个值。map不能直接在css中使用，如果你把一个map赋值给一个元素将会报错。下面的代码示例一个经典的map。

<code class="language-scss hljs " style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$<span class="hljs-tag" style="box-sizing: border-box;">map</span><span class="hljs-value" style="box-sizing: border-box;">: (  key1: value1,  key2: value2,  key3: value3);</span></code>

map使用

我们可以使用一系列的函数操作**map，可以使用循环指令遍历**map。
map相关的函数有map-keys()、map-values()、map-get()、map-has-key()、map-merge()、map-remove()、keywords()等，函数功能如下表所示。

函数功能示例map-keys(map)返回map里面所有的key(list)map-keys((“foo”: 1, “bar”: 2)) => “foo”, “bar”map-values(map)返回map里面所有的value(list)map-values((“foo”: 1, “bar”: 2)) => 1, 2map-get(map,key)返回map里面指定可以的valuemap-get((“foo”: 1, “bar”: 2), “foo”) => 1map-has-key(map,key)返回map里面是否含有指定的keymap-has-key((“foo”: 1, “bar”: 2), “foo”) => truemap-merge(map1,map2)合并map(map)map-merge((“foo”: 1), (“bar”: 2)) => (“foo”: 1, “bar”: 2)map-remove(map,keys)删除指定map中的指定key(map)map-remove((“foo”: 1, “bar”: 2), “bar”) => (“foo”: 1)keywords(args)返回一个函数参数组成的map(map)@mixin foo(args…){@debug keywords($args); //=> (arg1: val, arg2: val)}

我们可以使用@each指令遍历map，如下所示。

<code class="language-scss hljs " style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$<span class="hljs-tag" style="box-sizing: border-box;">map</span><span class="hljs-value" style="box-sizing: border-box;">: (  key1: value1,  key2: value2,  key3: value3);</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/* 遍历map */</span><span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">each</span> $key, $value<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);"> in</span> $map {</span>  <span class="hljs-class" style="box-sizing: border-box;">.element--</span>#{$key} {    <span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">: $value;</span>  }}</code>

map案例

map在Sass中应用广泛，有很多场合可以用到map，下面列举一二。

指定多值

css里有很多属性可以指定多个值，例如transition、box-shadow等，这个时候我们可以使用map来定义不同的值，然后可以统一使用。例如

<code class="language-scss hljs " style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/* 使用map定义不同的值 */</span>$card_transition_map<span class="hljs-value" style="box-sizing: border-box;">: (  trans1: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">200</span>ms transform ease-in-out,  trans2: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">400</span>ms background ease-in,  trans3: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">600</span>ms color linear);</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/* map-values统一使用 */</span><span class="hljs-class" style="box-sizing: border-box;">.card</span> {  <span class="hljs-attribute" style="box-sizing: border-box;">transition</span><span class="hljs-value" style="box-sizing: border-box;">: map-values($card_transition_map);</span>}</code>

编译之后输出

<code class="language-css hljs " style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-class" style="box-sizing: border-box;">.card</span> <span class="hljs-rules" style="box-sizing: border-box;">{    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">transition</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-number" style="box-sizing: border-box;">200</span>ms transform ease-in-out,                 <span class="hljs-number" style="box-sizing: border-box;">400</span>ms background ease-in,                 <span class="hljs-number" style="box-sizing: border-box;">600</span>ms color linear</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code>

压缩多值

我们可以使用zip函数来压缩多值，例如操作animate时：

<code class=" hljs lasso" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$animation_config</span>: (  name: <span class="hljs-literal" style="box-sizing: border-box; color: rgb(0, 136, 0);">none</span>,  <span class="hljs-built_in" style="box-sizing: border-box; font-weight: bold;">duration</span>: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0</span>s,  timing: ease,  delay: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">0</span>s,  iteration: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1</span>, <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// infinite</span>  direction: normal, <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// reverse, alternate, alternate-reverse</span>  fill<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-mode</span>: <span class="hljs-literal" style="box-sizing: border-box; color: rgb(0, 136, 0);">none</span>, <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// forwards, backwards, both</span>  play<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-state</span>: running);@function sh<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-setup</span>(<span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$config</span>) {  @<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">return</span> zip(<span class="hljs-built_in" style="box-sizing: border-box; font-weight: bold;">map</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-values</span>(<span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$config</span>)<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">...</span>);}<span class="hljs-built_in" style="box-sizing: border-box; font-weight: bold;">.</span>object {  animation: sh<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-setup</span>(<span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$animation_config</span>);}</code>

编译之后输出结果为

<code class=" hljs css" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-class" style="box-sizing: border-box;">.object</span> <span class="hljs-rules" style="box-sizing: border-box;">{  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">animation</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> none <span class="hljs-number" style="box-sizing: border-box;">0</span>s ease <span class="hljs-number" style="box-sizing: border-box;">0</span>s <span class="hljs-number" style="box-sizing: border-box;">1</span> normal none running</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code>

指定皮肤

我们可以使用一个循环来遍历不同的map，达到指定不同皮肤的功效。

<code class="language-scss hljs " style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$background_color<span class="hljs-value" style="box-sizing: border-box;">: (    jeremy: <span class="hljs-hexcolor" style="box-sizing: border-box; color: rgb(0, 136, 0);">#0989cb</span>,    beth: <span class="hljs-hexcolor" style="box-sizing: border-box; color: rgb(0, 136, 0);">#8666ae</span>,    matt: <span class="hljs-hexcolor" style="box-sizing: border-box; color: rgb(0, 136, 0);">#02bba7</span>,    ryan: <span class="hljs-hexcolor" style="box-sizing: border-box; color: rgb(0, 136, 0);">#ff8178</span>);</span>$<span class="hljs-attribute" style="box-sizing: border-box;">font</span><span class="hljs-value" style="box-sizing: border-box;">: (    jeremy: Helvetica,    beth: Verdana,    matt: Times,    ryan: Arial);</span><span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">each</span> $key, $value<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);"> in</span> $background_color {</span>    .#{$key} {        <span class="hljs-attribute" style="box-sizing: border-box;">background</span><span class="hljs-value" style="box-sizing: border-box;">: $value;</span>        <span class="hljs-attribute" style="box-sizing: border-box;">font-family</span><span class="hljs-value" style="box-sizing: border-box;">: map-get($font, $key);</span>    }}</code>

编译之后输出

<code class="language-css hljs " style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-class" style="box-sizing: border-box;">.jeremy</span> <span class="hljs-rules" style="box-sizing: border-box;">{  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-hexcolor" style="box-sizing: border-box; color: rgb(0, 136, 0);">#0989cb</span></span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">font-family</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> Helvetica</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span><span class="hljs-class" style="box-sizing: border-box;">.beth</span> <span class="hljs-rules" style="box-sizing: border-box;">{  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-hexcolor" style="box-sizing: border-box; color: rgb(0, 136, 0);">#8666ae</span></span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">font-family</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> Verdana</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span><span class="hljs-class" style="box-sizing: border-box;">.matt</span> <span class="hljs-rules" style="box-sizing: border-box;">{  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-hexcolor" style="box-sizing: border-box; color: rgb(0, 136, 0);">#02bba7</span></span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">font-family</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> Times</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span><span class="hljs-class" style="box-sizing: border-box;">.ryan</span> <span class="hljs-rules" style="box-sizing: border-box;">{  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-hexcolor" style="box-sizing: border-box; color: rgb(0, 136, 0);">#ff8178</span></span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">font-family</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> Arial</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code>

配置文件

使用Sass的一个最大的优点在于，我们可以对css文件进行统一的组织与管理，使用配置文件是达到目的的主要手段，例如我们把网页中所有层的z-index放配置文件里，在需要的地方进行调用。

<code class="language-scss hljs " style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*定义配置文件*/</span>$<span class="hljs-attribute" style="box-sizing: border-box;">z-index</span><span class="hljs-value" style="box-sizing: border-box;">: (  modal              : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">200</span>,  navigation         : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">100</span>,  footer             : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">90</span>,  triangle           : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">60</span>,  navigation-rainbow : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">50</span>,  share-type         : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">41</span>,  share              : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">40</span>,);</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*在合适的时机调用*/</span><span class="hljs-class" style="box-sizing: border-box;">.navigation</span> {  <span class="hljs-attribute" style="box-sizing: border-box;">z-index</span><span class="hljs-value" style="box-sizing: border-box;">: map-get($z-index, navigation);</span>}</code>

编译之后输出

<code class=" hljs css" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-class" style="box-sizing: border-box;">.navigation</span> <span class="hljs-rules" style="box-sizing: border-box;">{  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">z-index</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-number" style="box-sizing: border-box;">100</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code>

上面案例调用的时候还用到map-get函数，还是比较麻烦，我们继续简化。

<code class="language-scss hljs " style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$<span class="hljs-attribute" style="box-sizing: border-box;">z-index</span><span class="hljs-value" style="box-sizing: border-box;">: (  modal              : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">200</span>,  navigation         : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">100</span>,  footer             : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">90</span>,  triangle           : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">60</span>,  navigation-rainbow : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">50</span>,  share-type         : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">41</span>,  share              : <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">40</span>,);</span><span class="hljs-at_rule" style="box-sizing: border-box;">@function<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);"> z-index</span>($key) {</span>  <span class="hljs-at_rule" style="box-sizing: border-box;">@return<span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);"> map-get</span>($z-index, $key);</span>}<span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">mixin</span><span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);"> z-index</span>($key) {</span>  <span class="hljs-attribute" style="box-sizing: border-box;">z-index</span><span class="hljs-value" style="box-sizing: border-box;">: z-index($key);</span>}<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*调用时*/</span><span class="hljs-class" style="box-sizing: border-box;">.navigation</span> {  <span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">include</span><span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);"> z-index</span>(navigation);</span>}</code>

断点管理

下面代码演示如何在项目管理中如何进行断点管理。

<code class=" hljs scss" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// _config.scss</span>$breakpoints<span class="hljs-value" style="box-sizing: border-box;">: (  small: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">767</span>px,  medium: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">992</span>px,  large: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1200</span>px);</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// _mixins.scss</span><span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">mixin</span><span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);"> respond-to</span>($breakpoint) {</span>   <span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span><span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);"> map-has-key</span>($breakpoints, $breakpoint) {</span>    <span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">media</span> (min-width: #{</span><span class="hljs-function" style="box-sizing: border-box;">map-get($breakpoints, $breakpoint)</span>}) {      <span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">content</span>;</span>    }  }  <span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">else</span> {</span>    <span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">warn</span> <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"Unfortunately, no value could be retrieved from `#{$breakpoint}`. "</span>        + <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"Please make sure it is defined in `$breakpoints` map."</span>;</span>  }}<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// _component.scss</span><span class="hljs-class" style="box-sizing: border-box;">.element</span> {  <span class="hljs-attribute" style="box-sizing: border-box;">color</span><span class="hljs-value" style="box-sizing: border-box;">: hotpink;</span>  <span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">include</span><span class="hljs-preprocessor" style="box-sizing: border-box; color: rgb(136, 0, 0);"> respond-to</span>(small) {</span>    <span class="hljs-attribute" style="box-sizing: border-box;">color</span><span class="hljs-value" style="box-sizing: border-box;">: tomato;</span>  }}</code>

编译之后输出结果为

<code class=" hljs css" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-class" style="box-sizing: border-box;">.element</span> <span class="hljs-rules" style="box-sizing: border-box;">{  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> hotpink</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span><span class="hljs-at_rule" style="box-sizing: border-box;">@<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">media</span> (min-width: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">767</span>px) </span>{  <span class="hljs-class" style="box-sizing: border-box;">.element</span> <span class="hljs-rules" style="box-sizing: border-box;">{    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> tomato</span></span>;  <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>}</code>

处理前缀

下面我们来看map在处理前缀mixin中的应用，两个参数类型分别为map和list，使用需要注意。

<code class=" hljs mel" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*定义*/</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/// Mixin to prefix several properties at once</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/// @author Hugo Giraudel</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/// @param {Map} $declarations - Declarations to prefix</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/// @param {List} $prefixes (()) - List of prefixes to print</span><span class="hljs-variable" style="box-sizing: border-box;">@mixin</span> prefix(<span class="hljs-variable" style="box-sizing: border-box;">$declarations</span>, <span class="hljs-variable" style="box-sizing: border-box;">$prefixes</span>: ()) {  <span class="hljs-variable" style="box-sizing: border-box;">@each</span> <span class="hljs-variable" style="box-sizing: border-box;">$property</span>, <span class="hljs-variable" style="box-sizing: border-box;">$value</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">in</span> <span class="hljs-variable" style="box-sizing: border-box;">$declarations</span> {    <span class="hljs-variable" style="box-sizing: border-box;">@each</span> <span class="hljs-variable" style="box-sizing: border-box;">$prefix</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">in</span> <span class="hljs-variable" style="box-sizing: border-box;">$prefixes</span> {      #{<span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'-'</span> + <span class="hljs-variable" style="box-sizing: border-box;">$prefix</span> + <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'-'</span> + <span class="hljs-variable" style="box-sizing: border-box;">$property</span>}: <span class="hljs-variable" style="box-sizing: border-box;">$value</span>;    }    <span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">// Output standard non-prefixed declaration</span>    #{<span class="hljs-variable" style="box-sizing: border-box;">$property</span>}: <span class="hljs-variable" style="box-sizing: border-box;">$value</span>;  }}<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*使用*/</span>.selector {  <span class="hljs-variable" style="box-sizing: border-box;">@include</span> prefix((    column-count: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">3</span>,    column-gap: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">1.5</span>em,    column-rule: <span class="hljs-number" style="box-sizing: border-box; color: rgb(0, 136, 0);">2</span>px solid hotpink  ), webkit moz);}</code>

编译之后输出为

<code class=" hljs css" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-class" style="box-sizing: border-box;">.selector</span> <span class="hljs-rules" style="box-sizing: border-box;">{  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-column-count</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-number" style="box-sizing: border-box;">3</span></span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-moz-column-count</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-number" style="box-sizing: border-box;">3</span></span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">column-count</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-number" style="box-sizing: border-box;">3</span></span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-column-gap</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-number" style="box-sizing: border-box;">1.5</span>em</span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-moz-column-gap</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-number" style="box-sizing: border-box;">1.5</span>em</span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">column-gap</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-number" style="box-sizing: border-box;">1.5</span>em</span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-webkit-column-rule</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-number" style="box-sizing: border-box;">2</span>px solid hotpink</span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">-moz-column-rule</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-number" style="box-sizing: border-box;">2</span>px solid hotpink</span></span>;  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">column-rule</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> <span class="hljs-number" style="box-sizing: border-box;">2</span>px solid hotpink</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code>

反向函数

Hugo Giraudel大牛定义的反向函数。

<code class=" hljs lasso" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*定义*/</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/// Returns the opposite direction of each direction in a list</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/// @author Hugo Giraudel</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/// @param {List} $directions - List of initial directions</span><span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/// @return {List} - List of opposite directions</span>@function opposite<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-direction</span>(<span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$directions</span>) {  <span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$opposite</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-directions</span>: ();  <span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$direction</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-map</span>: (    <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'top'</span>:    <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'bottom'</span>,    <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'right'</span>:  <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'left'</span>,    <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'bottom'</span>: <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'top'</span>,    <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'left'</span>:   <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'right'</span>,    <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'center'</span>: <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'center'</span>,    <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'ltr'</span>:    <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'rtl'</span>,    <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'rtl'</span>:    <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">'ltr'</span>  );  @each <span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$direction</span> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">in</span> <span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$directions</span> {    <span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$direction</span>: <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">to</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-lower</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-case</span>(<span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$direction</span>);    @<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">if</span> <span class="hljs-built_in" style="box-sizing: border-box; font-weight: bold;">map</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-has</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-key</span>(<span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$direction</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-map</span>, <span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$direction</span>) {       <span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$opposite</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-directions</span>: append(<span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$opposite</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-directions</span>, unquote(<span class="hljs-built_in" style="box-sizing: border-box; font-weight: bold;">map</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-get</span>(<span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$direction</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-map</span>, <span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$direction</span>)));    } @<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">else</span> {      @warn <span class="hljs-string" style="box-sizing: border-box; color: rgb(136, 0, 0);">"No opposite direction can be found for `#{$direction}`. Direction omitted."</span>;    }  }  @<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">return</span> <span class="hljs-variable" style="box-sizing: border-box; color: rgb(0, 136, 0);">$opposite</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-directions</span>;}<span class="hljs-comment" style="box-sizing: border-box; color: rgb(136, 136, 136);">/*使用*/</span><span class="hljs-built_in" style="box-sizing: border-box; font-weight: bold;">.</span>selector {  background<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-position</span>: opposite<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(136, 136, 255);">-direction</span>(top right);}</code>

编译之后输出结果为

<code class=" hljs css" style="box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; padding: 0.5em; color: rgb(0, 0, 0); border-radius: 0px; display: block; background-image: initial; background-attachment: initial; background-color: transparent !important; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span class="hljs-class" style="box-sizing: border-box;">.selector</span> <span class="hljs-rules" style="box-sizing: border-box;">{  <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background-position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(136, 0, 0);"> bottom left</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code>

深入阅读

本文的写作过程大量参考了以下文章，大家可以仔细阅读下面文章获得更深的体会。

官方文档
mapfunction
Real Sass, Real Maps
Making Use of Sass’ Zip() Function
Sass Maps Are Awesome!
Using Sass Maps
Sass Mixins to Kickstart Your Project

声明

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助。
本文原文链接，http://blog.csdn.net/whqet/article/details/43832135
欢迎大家访问独立博客http://whqet.github.io

0 0