Sass map详解

作为一个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%20map%E8%AF%A6%E8%A7%A3/*
欢迎大家访问CSDN博客,http://blog.csdn.net/whqet/ *

时间: 2024-10-20 11:23:29

Sass map详解的相关文章

List、Set、Map详解及区别

一.List接口 List是一个继承于Collection的接口,即List是集合中的一种.List是有序的队列,List中的每一个元素都有一个索引:第一个元素的索引值是0,往后的元素的索引值依次+1.和Set不同,List中允许有重复的元素.实现List接口的集合主要有:ArrayList.LinkedList.Vector.Stack. ArrayList ArrayList是一个动态数组,也是我们最常用的集合.它允许任何符合规则的元素插入甚至包括null.每一个ArrayList都有一个初

源映射(Source Map)详解

一.什么是源映射 为了提高性能,很多站点都会先压缩 JavaScript 代码然后上线, 但如果代码运行时出现错误,浏览器只会显示在已压缩的代码中的位置,很难确定真正的源码错误位置. 这时源映射就登场了. 源映射(Source Map)是一种数据格式,它存储了源代码和生成代码之间的位置映射关系. 源映射一般使用 .map 扩展名,源映射本质是一个 JSON 文本文档,其 MIME 类型也一般设为 application/json. 二.如何使用源映射 在 JavaScript 代码中添加注释:

C++ STL map详解

一.解释: p { margin-bottom: 0.25cm; direction: ltr; color: #00000a; line-height: 120%; text-align: justify; orphans: 0; widows: 0 } p.western { font-family: "Calibri", serif; font-size: 10pt } p.cjk { font-family: ; font-size: 10pt } p.ctl { font-f

集合--之map详解

一.简单介绍Map map是键值对的集合接口,它的实现类主要包括:HashMap,TreeMap,Hashtable以及LinkedHashMap等.其中这四者的区别如下(简单介绍):--HashMap:非同步的.最常用的Map,它根据key的HashCode 值来存储数据,根据key可以直接获取它的Value,同时它具有很快的访问速度.HashMap最多只允许一条记录的key值为Null(多条会覆盖);允许多条记录的Value为 Null.--TreeMap: 非同步的.能够把它保存的记录根据

C++ map详解

1.什么是mapmap是一个键值对容器.在处理一对一数据是,很有用. 2.map数据结构的特点map内部自建一颗红黑树,这棵树具有对数据自动排序的功能,因此,map内的数据都是按key的值排好序的. 3.map数据插入数据的插入有三种方法:第一种,调用insert函数,插入pair类型数据示例如下所示: #include <map> #include <string> #include <iostream> Using namespace std; int main()

Javascript中Array.prototype.map()详解

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数.callback 每次执行后的返回值组合起来形成一个新数组. callback 函数只会在有值的索引上被调用:那些从来没被赋过值或者使用 delete 删除的索引则不会被调用. 在我们日常开发中,操作和转换数组是一件很常见的操作,下面我们来看一个实例: 复制代码代码如下: var desColors = [],    srcColors = [        {r: 255, g: 255, b: 255 }, // W

JavaScript Source Map 详解

上周,jQuery 1.9发布. 这是2.0版之前的最后一个新版本,有很多新功能,其中一个就是支持Source Map. 访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js,打开压缩后的版本,滚动到底部,你可以看到最后一行是这样的: //@ sourceMappingURL=jquery.min.map 这就是Source Map.它是一个独立的map文件,与源码在同一个目录下,你可以点击进去,看看它的样子. 这是

(转)JavaScript Source Map 详解

原文链接:http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html 这是2.0版之前的最后一个新版本,有很多新功能,其中一个就是支持Source Map. 访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js,打开压缩后的版本,滚动到底部,你可以看到最后一行是这样的: //@ sourceMappingURL=jquery.min.map 这就

[js高手之路] es6系列教程 - Map详解以及常用api

ECMAScript 6中的Map类型是一种存储着许多键值对的有序列表.键值对支持所有的数据类型. 键 0 和 ‘0’会被当做两个不同的键,不会发生强制类型转换. 如何使用Map? let map = new Map(); 常用方法: set( 键,值 ):  添加新的键值对元素 get( 键 ): 获取键对应的值,如果这个值不存在,返回undefined 1 let map = new Map(); 2 map.set( '0', 'ghostwu' ); 3 map.set( 0, 'gho