Sass map詳解

原創 wszjfei 2018-09-03 16:51

作爲一個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, 2
map-get(map,key) 返回map裏面指定可以的value map-get((“foo”: 1, “bar”: 2), “foo”) => 1
map-has-key(map,key) 返回map裏面是否含有指定的key map-has-key((“foo”: 1, “bar”: 2), “foo”) => true
map-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>

深入閱讀

本文的寫作過程大量參考了以下文章，大家可以仔細閱讀下面文章獲得更深的體會。

聲明

前端開發whqet，關注前端開發，分享相關資源。csdn專家博客，王海慶希望能對您有所幫助。 
本文原文鏈接，http://blog.csdn.net/whqet/article/details/43832135 
歡迎大家訪問獨立博客http://whqet.github.io

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

芯片產業管理和營銷指北（3）—— 贏得客戶

注意：本文是依據 俞志宏 老師的 《我在硅谷管芯片：芯片產品線經理生存指南》 一書閱讀後歸納總結得到。可以試做此書的讀後感，對芯片產業感興趣的同僚強烈推薦此書 爲什麼要見客戶 和客戶面對面主要是獲取與客戶相關的各類信息，包含但不限於： 市

zer0black 2024-06-09 14:34:09

【stars-one】 星念輕小說下載器

原文: 【stars-one】星念輕小說下載器-Stars-One的雜貨小窩 一款將在線輕小說保存到本地的下載工具 軟件介紹 小說單卷下載 小說全卷下載(需VIP) 多線程解析和下載 下載導出爲epub文件 自動更新 軟件使用前需要進行

Stars-one 2024-06-09 14:22:28

shell編程相關的

  shell腳本獲取腳本所在目錄 執行腳本的父目錄不一定是當前的工作目錄。 url=$(dirname $(readlink -f $0))

馬昌偉 2024-06-09 14:16:47

kvm鏈接克隆虛擬機遷移到openstack機器的實驗

  總結 如果是完整克隆的那種虛擬機，是可以直接在openstack使用的，如果鏡像格式沒問題的話。   因爲kvm虛擬機大部分都是鏈接克隆出來的鏡像，不可用直接複製使用，所以需要創建新的鏡像文件   創建空盤：qemu-img creat

馬昌偉 2024-06-09 14:16:47

【Python】DQN處理CartPole-v1

DQN是強化學習中的一種方法，是對Q-Learning的擴展。 通過引入深度神經網絡、經驗回放和目標網絡等技術，使得Q-Learning算法能夠在高維、連續的狀態空間中應用，解決了傳統Q-Learning方法在這些場景下的侷限性。 Q-Le

Dsp Tian 2024-06-09 14:14:07

P1355 神祕大三角（凸包）

P1355 神祕大三角 - 洛谷 | 計算機科學教育新生態 (luogu.com.cn) 隊友推薦的，算是入門凸包，就是用叉積判斷一下點是否相對每條邊都在凸包的邊的左側。 1 #include <bits/stdc++.h> 2

SnowLove 2024-06-09 14:13:17

前端使用 Konva 實現可視化設計器（13）- 折線 - 最優路徑應用【思路篇】

這一章把直線連接改爲折線連接，沿用原來連接點的關係信息。關於折線的計算，使用的是開源的 AStar 算法進行路徑規劃，啓發方式爲 曼哈頓距離，且不允許對角線移動。 請大家動動小手，給我一個免費的 Star 吧~ 大家如果發現了 Bug，歡

xachary 2024-06-09 14:10:57

生產計劃範圍的擴展 - 工單的拆分與合併

背景 　　在過往與不少合作伙伴們，就生產計劃項目方案的討論中，經常提及這樣的一種情況： “我們在編制生產計劃時，有些數量較大的訂單，需要拆分成多個子訂單，這樣才能利用多個資源並行加工，以縮短生產週期，提高資源利用率” - 我們稱爲【工單拆分

kentzhang 2024-06-09 14:09:57

APS系統設計經驗分享(時間推導II - 2023.09)

　　在前一篇關於APS系統設計分享文章(《APS系統設計經驗分享(時間推導 - 2023.03)》)中，我們提到將會分享使用OptaPlanner作爲規劃引擎開發APS系統過程中，遇到的一些時間相關的設計建議與異常情況分析。後來一直忙於項目

kentzhang 2024-06-09 14:09:57

排程過程中任務鎖定的外延與內涵

在生產排程過程中，除了可以藉助強大的算法，與優質的規劃模型對待排任務進行排產優化外，還會遇到一些需要人爲鎖定部分任務的情況。無論是APS系統開發人員，還是排產作業人員，在常見的認識中，對於“鎖定”概念的理解，第一反應就是把任務固定到某個資源

kentzhang 2024-06-09 14:09:57

排程系統中關於任務優先級的需求延伸與設計構思

無論是面向銷售訂單的MPS，還是基於多工序制約關係的APS，還是具體車間生產中針對單一工序的任務作業調度優化，都存在基於被排程對象(例如銷售訂單、生產工單、工序任務)的優先級進行優化的需求場景。當我們僅在宏觀、較高層次的角度考慮，任務優先級

kentzhang 2024-06-09 14:09:57

從零手寫實現 nginx-11-文件處理邏輯與 range 範圍查詢合併

前言 大家好，我是老馬。很高興遇到你。 我們爲 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的，可以參考我的另一個項目：

葉止水 2024-06-09 14:02:36

nginx快速分析日誌並找出攻擊IP

第一步：分析NGINX日誌 分析日誌主要目的是尋找那些異常活躍的IP地址，通過以下命令可以快速找出。  cat access.log | awk '{print$1}' |sort|uniq -c|sort -rn|head -10 命

xiaobingch 2024-06-09 13:59:16

Vue CLI 4與項目構建實戰指南

title: Vue CLI 4與項目構建實戰指南 date: 2024/6/9 updated: 2024/6/9 excerpt: 這篇文章介紹瞭如何使用Vue CLI優化項目構建配置，提高開發效率，涉及配置管理、項目部署策略、插件系

Mifen 2024-06-09 13:40:15

Vue第三方庫與插件實戰手冊

title: Vue第三方庫與插件實戰手冊 date: 2024/6/8 updated: 2024/6/8 excerpt: 這篇文章介紹瞭如何在Vue框架中實現數據的高效驗證與處理，以及如何集成ECharts、D3.js、Chart.

Mifen 2024-06-09 13:40:15