Sass map詳解

本文轉載自查看原文 2015-02-15 13:30 8252 前端開發/ Sass 指南/ Sass map/ sass/ css3

作為一個CSS預處理器，Sass正受到越來越多的青睞，諸如Github、Codepen、CSS-Tricks、SitePoint、w3cplus等網站采用Sass組織、管理CSS文件，Sass正在逐漸成為事實上的CSS預處理器行業標准。接下來幾篇文章，我們來研讀下Sass中的關鍵功能，今天來看map，大家不妨一坐，精彩內容馬上呈現。
這里寫圖片描述

map簡介

在Sass中，maps代表一種數據類型，可以包含若干鍵值對的對象類型，使用()包圍一個map，里面的鍵值對用逗號隔開，鍵和值可以是任何的Sass數據類型，盡管一個值可以用在多個鍵上，但是通過一個鍵我們必須只能找到一個值。map不能直接在css中使用，如果你把一個map賦值給一個元素將會報錯。下面的代碼示例一個經典的map。

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

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，如下所示。

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);
/* 遍歷map */
@each $key, $value in $map {
  .element--#{$key} {
    background: $value;
  }
}

map案例

map在Sass中應用廣泛，有很多場合可以用到map，下面列舉一二。

指定多值

css里有很多屬性可以指定多個值，例如transition、box-shadow等，這個時候我們可以使用map來定義不同的值，然后可以統一使用。例如

/* 使用map定義不同的值 */
$card_transition_map: (
  trans1: 200ms transform ease-in-out,
  trans2: 400ms background ease-in,
  trans3: 600ms color linear
);
/* map-values統一使用 */
.card {
  transition: map-values($card_transition_map);
}

編譯之后輸出

.card {
    transition: 200ms transform ease-in-out, 
                400ms background ease-in, 
                600ms color linear;
}

壓縮多值

我們可以使用zip函數來壓縮多值，例如操作animate時：

$animation_config: (
  name: none,
  duration: 0s,
  timing: ease,
  delay: 0s,
  iteration: 1, // infinite
  direction: normal, // reverse, alternate, alternate-reverse
  fill-mode: none, // forwards, backwards, both
  play-state: running
);

@function sh-setup($config) {
  @return zip(map-values($config)...);
}
 
.object {
  animation: sh-setup($animation_config);
}

編譯之后輸出結果為

.object {
  animation: none 0s ease 0s 1 normal none running;
}

指定皮膚

我們可以使用一個循環來遍歷不同的map，達到指定不同皮膚的功效。

$background_color: (
	jeremy: #0989cb,
	beth: #8666ae,
	matt: #02bba7,
	ryan: #ff8178
);
$font: (
	jeremy: Helvetica,
	beth: Verdana,
	matt: Times,
	ryan: Arial
);
@each $key, $value in $background_color {
	.#{$key} {
		background: $value;
		font-family: map-get($font, $key);
	}
}

編譯之后輸出

.jeremy {
  background: #0989cb;
  font-family: Helvetica;
}
.beth {
  background: #8666ae;
  font-family: Verdana;
}
.matt {
  background: #02bba7;
  font-family: Times;
}
.ryan {
  background: #ff8178;
  font-family: Arial;
}

配置文件

使用Sass的一個最大的優點在於，我們可以對css文件進行統一的組織與管理，使用配置文件是達到目的的主要手段，例如我們把網頁中所有層的z-index放配置文件里，在需要的地方進行調用。

/*定義配置文件*/
$z-index: (
  modal              : 200,
  navigation         : 100,
  footer             : 90,
  triangle           : 60,
  navigation-rainbow : 50,
  share-type         : 41,
  share              : 40,
);
/*在合適的時機調用*/
.navigation {
  z-index: map-get($z-index, navigation);
}

編譯之后輸出

.navigation {
  z-index: 100;
}

上面案例調用的時候還用到map-get函數，還是比較麻煩，我們繼續簡化。

$z-index: (
  modal              : 200,
  navigation         : 100,
  footer             : 90,
  triangle           : 60,
  navigation-rainbow : 50,
  share-type         : 41,
  share              : 40,
);
@function z-index($key) {
  @return map-get($z-index, $key);
}
@mixin z-index($key) {
  z-index: z-index($key);
}
/*調用時*/
.navigation {
  @include z-index(navigation);
}

斷點管理

下面代碼演示如何在項目管理中如何進行斷點管理。

// _config.scss
$breakpoints: (
  small: 767px,
  medium: 992px,
  large: 1200px
);
 
// _mixins.scss
@mixin respond-to($breakpoint) { 
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  }
 
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}
 
// _component.scss
.element {
  color: hotpink;
 
  @include respond-to(small) {
    color: tomato;
  }
}

編譯之后輸出結果為

.element {
  color: hotpink;
}

@media (min-width: 767px) {
  .element {
    color: tomato;
  }
}

處理前綴

下面我們來看map在處理前綴mixin中的應用，兩個參數類型分別為map和list，使用需要注意。

/*定義*/
/// Mixin to prefix several properties at once
/// @author Hugo Giraudel
/// @param {Map} $declarations - Declarations to prefix
/// @param {List} $prefixes (()) - List of prefixes to print
@mixin prefix($declarations, $prefixes: ()) {
  @each $property, $value in $declarations {
    @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
    }

    // Output standard non-prefixed declaration
    #{$property}: $value;
  }
}
/*使用*/
.selector {
  @include prefix((
    column-count: 3,
    column-gap: 1.5em,
    column-rule: 2px solid hotpink
  ), webkit moz);
}

編譯之后輸出為

.selector {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1.5em;
  -moz-column-gap: 1.5em;
  column-gap: 1.5em;
  -webkit-column-rule: 2px solid hotpink;
  -moz-column-rule: 2px solid hotpink;
  column-rule: 2px solid hotpink;
}

反向函數

Hugo Giraudel大牛定義的反向函數。

/*定義*/
/// Returns the opposite direction of each direction in a list
/// @author Hugo Giraudel
/// @param {List} $directions - List of initial directions
/// @return {List} - List of opposite directions
@function opposite-direction($directions) {
  $opposite-directions: ();
  $direction-map: (
    'top':    'bottom',
    'right':  'left',
    'bottom': 'top',
    'left':   'right',
    'center': 'center',
    'ltr':    'rtl',
    'rtl':    'ltr'
  );
 
  @each $direction in $directions {
    $direction: to-lower-case($direction);
    
    @if map-has-key($direction-map, $direction) { 
      $opposite-directions: append($opposite-directions, unquote(map-get($direction-map, $direction)));
    } @else {
      @warn "No opposite direction can be found for `#{$direction}`. Direction omitted.";
    }
  }
 
  @return $opposite-directions;
}
/*使用*/
.selector {
  background-position: opposite-direction(top right);
}

編譯之后輸出結果為

.selector {
  background-position: bottom left;
}

深入閱讀

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

聲明

前端開發whqet，關注前端開發，分享相關資源。csdn專家博客，王海慶希望能對您有所幫助。
本文原文鏈接，http://whqet.github.io/2015/02/15/Sass map詳解/
*歡迎大家訪問CSDN博客，http://blog.csdn.net/whqet/ *

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 map詳解 SASS的升級版--SCSS 基本介紹+Sass使用詳解 python map函數詳解 python map 詳解 python lambda ，map詳解 map接口詳解 CodeWarrior的map文件詳解 map函數用法詳解 Java—Map集合詳解 Map和Collection詳解