使用list-maps將你的Sass技術水平提升到另外一層次

Sass3.3版本的出來，你應該開始使用Sass的map功能。

多年以來，變量一直是Sass的核心功能。咱們使用它愈來愈讓人疲憊，你不乏看到這樣寫Sass：

//建立一個核心的顏色
$bravo_gray: #333;

// 將建立的核心顏色分配給一個有語義化的變量
$input-disabled-color:          $bravo_gray;

// 將語義化變量分得更具體化
$input-disabled-background:     lighten($input-disabled-color, 75%);
$input-disabled-border:         lighten($input-disabled-color, 50%);
$input-disabled-text:           lighten($input-disabled-color, 50%);

這樣他能很好的運行。咱們按約定手動的設置變量。要使用這個功能，咱們要這樣作：

input[disabled] {
  background-color: $input-disabled-background;
  border-color: $input-disabled-border;
  color: $input-disabled-text;
}

編譯出來的CSS:

input[disabled] {
  background-color: #f2f2f2;
  border-color: #b3b3b3;
  color: #b3b3b3; 
}

們能夠作得更好。在Sass3.3 版本中出一些新的並且很是有趣的功能特性，咱們一塊兒來嘗試：map。map在列表中，能夠獲得很精肯定位。Sass的列表功能出來已經好久了，但列表功能表現平平。可是map的出現，使用的層面更爲普遍，能夠存儲在列表中，也能夠從列表中檢索出值。

然libsass缺少這樣的核心功能，但Lu Nelson爲此製做了一個附加功能可使用。

在大多數狀況之下，他們使用方法都是大同小異。只是在語法上有一些關鍵性的差別：每對key:value之間沒有冒號(:)，並且最後一對key:value以後沒有逗號(,)。

下面的示例是使用了Lu Nelson的libsass。

使用list-maps

和map作的第一個有趣的事情是，你能夠在列中存儲key:value做爲索引值。而後使用$input做爲變量命名空間，咱們能夠按下面的方式操做：

$input: (
  disabled-background lighten($input-disabled-color, 75%),
  disabled-border lighten($input-disabled-color, 50%),
  disabled-text lighten($input-disabled-color, 50%)
);

如今咱們將全部的值以key和value的形式存儲在一個數組中，咱們就能夠利用Sass的規則開始編寫。

在下面的示例中，我使用Sass的map-get()函數從變量$input中檢索出它的key。map-get()具備兩個參數，像這樣：map-get($list,$key)。

因此咱們不須要使用舊規則：

background-color: $input-disabled-background;

如今咱們徹底能夠這樣使用：

background-color: map-get($input, disabled-background);

總之，咱們能夠像這樣更新input[disabled]樣式：

input[disabled] {
  background-color: map-get($input, disabled-background);
  border-color: map-get($input, disabled-border);
  color: map-get($input, disabled-text);
}

編譯出來的CSS：

input[disabled] {
  background-color: #f2f2f2;
  border-color: #b3b3b3;
  color: #b3b3b3; 
}

特別聲明：按照上樣方法使用，在編譯時，命令終端會提示：
DEPRECATION WARNING: Passing lists of pairs to map-get is deprecated and will
be removed in future versions of Sass. Use Sass maps instead. For details, see
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#maps.

根據map語法說明，咱們能夠得知，在Sass中，有關於map的語法有兩種：

老版本：

$map: (
  key1 value1, 
  key2 value2, 
  key3 value3
);

新版本

$map: (
  key1: value1, 
  key2: value2, 
  key3: value3
);

二者區別，就是key和value之間添加了冒號（:），像其餘語言中使用數組同樣。換句話，原文中的示例使用的是老版本語法。咱們能夠將其更換成新版本的map語法。更換很是簡單：

//map老版本語法
$input: (
  disabled-background lighten($input-disabled-color, 75%),
  disabled-border lighten($input-disabled-color, 50%),
  disabled-text lighten($input-disabled-color, 50%)
);

只須要將上面map老版本語法中的key和value之間添加冒號便可：

$input: (
  disabled-background: lighten($input-disabled-color, 75%),
  disabled-border: lighten($input-disabled-color, 50%),
  disabled-text: lighten($input-disabled-color, 50%)
);

再次編譯，命令終端將不會再報錯，並且獲得的結果也是同樣的：

input[disabled] {
  background-color: #f2f2f2;
  border-color: #b3b3b3;
  color: #b3b3b3; 
}

接下來的內容中，譯者自動將map的老版本語法按新版本語法書寫。

數組中嵌套對象

看代碼，還有另外一個形式出現。禁用樣式是能夠重複使用的。使用map能夠嵌套這些樣式和檢索這些值。

能夠這樣去理解，input元素自身有一個樣式，而[disabled]樣式至關於input的附屬樣式，相似於嵌套在input自身樣式中。如此一來，這和Sass的map嵌套map功能極其類似。也就是說能夠經過map的嵌套來存儲和檢索出[disabled]的樣式。——＠大漠

嵌套map工做方式惟一的限制，就是每一個鍵值（key）都要一個值(value)。就像是JSON數據同樣，一個值能夠設置成另外一對key:value。咱們來看一個嵌套的map例子：

$variable: (
    key (
        key: value,
        key: value,
        key: (
            key: value,
            key: value
        )
    )
);

看看map嵌套的結構，而後看看咱們當前的結構，能夠將disabled的空間名重寫前面的map：

$input: (
  disabled: (
    background: lighten($input-disabled-color, 75%),
    border: lighten($input-disabled-color, 50%),
    text: lighten($input-disabled-color, 50%)
  )
);

若是要使用這個，咱們就須要使用map-get-z()函數從鍵值中檢索出須要的值。在下面的示例中，你會看到使用逗號(,)將分隔開：

background-color: map-get-z($input, disabled, background);

整個樣式看起來像這樣：

input[disabled] {
  background-color: map-get-z($input, disabled, background);
  border-color: map-get-z($input, disabled, border);
  color: map-get-z($input, disabled, text);
}

使用這種方法，編譯出來的CSS：

input[disabled] {
  background-color: #f2f2f2;
  border-color: #b3b3b3;
  color: #b3b3b3; 
}

特別聲明：若是想使用map-get-z()函數功能，須要在你的Sass中添加lunelson的sass-list-maps中的幾個函數：

//Sass-list-maps地址：https://github.com/lunelson/sass-list-maps/blob/master/_sass-list-maps.scss

// list-map helper functions
// 0.9.3 -- key() and value() tentatively added as alternatives to 'tuple-' named funcs
// 0.9.6 -- added better error handling; aliased to single version of each

@function tuple-key($tuple) { 
  @if length($tuple) < 1 { 
    @return null; 
  } @else { 
    @return nth($tuple, 1); 
  } 
}

@function tuple-value($tuple) { 
  @if length($tuple) < 2 { 
    @return null; 
  } @else { 
    @return nth($tuple, 2); 
  } 
}

@function key($tuple) { 
  @return tuple-key($tuple); 
}

@function value($tuple) { 
  @return tuple-value($tuple); 
}

// 0.9.5 -- added list-map-check()
@function list-map-check($list) { 
  @if length($list) == 2 and length(nth($list, 1)) == 1 { 
    @return append((), $list, 'comma'); 
  } 
  @return $list; 
}

// list-map versions of list-map-get(), -merge() and -remove()
// 0.9.5 -- list-map-check() has been integrated to handle single-pair inputs, and give correct outputs

@function map-get($list, $key, $check: true) {
  @if $check { $list: list-map-check($list); } @each $tuple in $list {
    @if tuple-key($tuple) == $key { @return list-map-check(tuple-value($tuple)); } }
   // @if tuple-key($tuple) == $key { @return list-map-check($tuple); } }
  @return null;
}

// deep/nested map functions: list-map-get-z() and list-map-merge-z()
// 0.9.5 -- list-map-check() has been integrated, implicitly or explicitly
@function map-get-z($list, $keys...) {
  @if $list == null { @return null; }
  $length: length($keys);
  $list: map-get($list, nth($keys, 1));
  @if $length > 1 {
    @for $n from 2 through $length {
      @if $list == null { @return null; }
      $list: map-get($list, nth($keys, $n), false); }
    @return $list; }
  @else { @return $list; }
}

List-maps是智能的

Sass的map還有不少有用的功能，但這裏我只說map-has-key()函數，總之若是你的列表中包含了這個key，這將會返回一個布爾值。map-has-key()函數包括兩個參數：$list和key。使用@if指令，咱們能夠像下面這樣使用：

@if map-has-key($input, disabled) {
  input[disabled] {
    background-color: map-get-z($input, disabled, background);
    border-color: map-get-z($input, disabled, border);
    color: map-get-z($input, disabled, text);
  }
}

在建立本身的框架時，這是很是有幫助的。咱們能夠根據項目中可見的key作出相應的反應，跟這個很是的相似：

error: unbound variable $input-disabled-background

Sass的map中自帶了map-get($map, $key)、map-merge($map1, $map2)、map-remove($map, $key)、map-keys($map)、map-values($map)、map-has-key($map, $key)和keywords($args)等函數功能。除此以外，lunelson的list-maps還自定義了一些有關於map功能的函數，對於咱們實際項目中的運用，幫助特別的，感興趣的同窗能夠經過git命令（git clone https://github.com/lunelson/sass-list-maps.git）將此庫下載到本身的電腦中。——＠大漠

結論

總之，在Sass的項目中list-maps是愈來愈受歡迎的特性。此功能能夠幫助咱們如何更好的控制項目中的全部變量，以及咱們如何更好的應用他們。

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了我的對技術的理解。若是翻譯有不對之處，還煩請同行朋友指點。謝謝！

---

英文原文
via w3cplus