• Sass中的Map 详解


    Sass中的Map长什么样

    Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现, Sass 的 map 长得与 JSON 极其相似。

    json:

    {
    "employees": [
    { "firstName":"John" , "lastName":"Doe" },
    { "firstName":"Anna" , "lastName":"Smith" },
    { "firstName":"Peter" , "lastName":"Jones" }
    ]
    }
    

    Sass中的map

    $map: (
        key1: value1,
        key2: (
            key-1: value-1,
            key-2: value-2,
        ),
        key3: value3
    );
    

    如何定义map

    首先有一个类似于 Sass 的变量一样,用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 (),将数据以 key:value 的形式赋予,其中 key 和 value 是成对出现,并且每对之间使用逗号 (,) 分隔,其中最后一组后面没有逗号。

    其中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。

    Sass Maps的函数

    在 Sass 中 map 自身带了七个函数: 

    • map-get($map,$key):根据给定的 key 值,返回 map 中相关的值。
    • map-merge($map1,$map2):将两个 map 合并成一个新的 map。
    • map-remove($map,$key):从 map 中删除一个 key,返回一个新 map。
    • map-keys($map):返回 map 中所有的 key。
    • map-values($map):返回 map 中所有的 value。
    • map-has-key($map,$key):根据给定的 key 值判断 map 是否有对应的 value 值,如果有返回 true,否则返回 false。
    • keywords($args):返回一个函数的参数,这个参数可以动态的设置 key 和 value。

     Sass Maps的函数

    1、map-get($map,$key)

    map-get($map,$key) 函数的作用是根据 $key 参数,返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中,将返回 null 值。此函数包括两个参数:

    • $map:定义好的 map。
    • $key:需要遍历的 key。
    //SCSS
    $social-colors: (
        dribble: #ea4c89,
        facebook: #3b5998,
        github: #171515,
        google: #db4437,
        twitter: #55acee
    );
    .btn-dribble{
      color: map-get($social-colors,facebook);
    }
    
    //编译后的css
    .btn-dribble {color: #3b5998; }
    

    2、map-has-key($map,$key) 函数  

    map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中有这个 $key,则函数返回 true,否则返回 false。

    @if map-has-key($social-colors,facebook){
        .btn-facebook {
            color: map-get($social-colors,facebook);
        }
    } @else {
        @warn "No color found for faceboo in $social-colors map. Property ommitted."
    }
    

    但总觉得这样写是傻傻的,总不可能每获取一个 key 都写一个 @if 语句吧。其实不用这么复杂,我们可以自定义一个函数,比如 colors():

    @function colors($color){
        @if not map-has-key($social-colors,$color){
            @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
        }
        @return map-get($social-colors,$color);
    }
    

    有了这个函数之后,我们就可以这样使用

    .btn-dribble {
        color: colors(dribble);
    }
    .btn-facebook {
        color: colors(facebook);
    }
    .btn-github {
        color: colors(github);
    }
    .btn-google {
        color: colors(google);
    }
    .btn-twitter {
        color: colors(twitter);
    }
    .btn-weibo {
        color: colors(weibo);
    }
    

    当然,如果你对 Sass 的指令熟悉的话,可以使用 @each:

    $social-network:dribble,facebook,github,google,twtter,weibo;
    @each $social-network,$social-color in $social-colors { .btn-#{$social-network} { color: colors($social-network); } }

     3、map-keys($map)

    map-keys($map) 函数将会返回 $map 中的所有 key。这些值赋予给一个变量,那他就是一个列表。如:

    map-keys($social-colors);
    

    其返回的值为:

    "dribble","facebook","github","google","twitter"

    换句话说:

    $list: map-keys($social-colors);

    相当于:

    $list:"dribble","facebook","github","google","twitter";

    这个时候,就可以配合 Sass 的 list 做很多事情。

    上面的示例,可以做通过 map-keys($map) 来做一个修改:

    @function colors($color){
        $names: map-keys($social-colors);
        @if not index($names,$color){
            @warn "Waring: `#{$color} is not a valid color name.`";
        }
        @return map-get($social-colors,$color);
    }
    

    上面代码中最不同之处,我们使 用map-key s将 $social-colors 这个 map 的所有 key 取出,并赋予给一个名 为 $names 的列表。然后通过 index($names,$color) 返回 $color 在 $names 位置,如果这个位置不存在,将返回提示信息,如果存在将返回正确的值。

    同样,也可以通过 @each 或者 @for 遍历出所有值:

    // @each
    @each $name in map-keys($social-colors){
        .btn-#{$name}{
            color: colors($name);
        }
    }
    
    //@for
    @for $i from 1 through length(map-keys($social-colors)){
        .btn-#{nth(map-keys($social-colors),$i)} {
            color: colors(nth(map-keys($social-colors),$i));
        }
    }
    

    虽然使用的方法不一样,但最终得到的 CSS 是一样的

     4、map-values($map)

    map-values($map) 函数类似于 map-keys($map) 功能,不同的是 map-values($map )获取的是 $map 的所有 value 值,可以说也将是一个列表。而且,map-values($map) 中如果有相同的 value 也将会全部获取出来。

    如前面的示例,使用:

    map-values($social-colors)
    

    将会返回:

    #ea4c89,#3b5998,#171515,#db4437,#55acee
    

    值与值之前同样用逗号分隔。

    5、map-merge($map1,$map2)

    map-merge($map1,$map2)
    

    map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并,然后得到一个新的 $map。如果你要快速将新的值插入到 $map 中的话,这种方法是最佳方法

    如:

    $color: (
        text: #f36,
        link: #f63,
        border: #ddd,
        backround: #fff
    );
    $typo:(
        font-size: 12px,
        line-height: 1.6
    );
    //如果希望将这两个 $map 合并成一个 map,我们只要这样做:
    $newmap: map-merge($color,$typo);
    //将会生成一个新的 map:
    $newmap:(
        text: #f36,
        link: #f63,
        border: #ddd,
        background: #fff,
        font-size: 12px,
        line-height: 1.6
    );
    

    这样你就可以借助 map-get( ) 等函数做其他事情了。

    不过有一点需要注意,如果 $map1 和 $map2 中有相同的 $key 名,那么将 $map2 中的 $key 会取代 $map1 中的值

     6、map-remove($map,$key)

    map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key,从而得到一个新的 map。其返回的值还是一个 map。他并不能直接从一个 map 中删除另一个 map,仅能通过删除 map 中的某个 key 得到新 map。如:

    $map:map-remove($social-colors,dribble);
    

    返回的是一个新 map:

    $map:(
        facebook: #3b5998,
        github: #171515,
        google: #db4437,
        twitter: #55acee
    );
    

    如果删除的 key 并不存在于 $map 中,那么 map-remove() 函数返回的新 map 和以前的 map 一样。

    7、keywords($args)

    keywords($args) 函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现,其中 $args 变成 key(会自动去掉$符号),而 $args 对应的值就是value。

    @mixin map($args...){
        @debug keywords($args);
    }
    
    @include map(
      $dribble: #ea4c89,
      $facebook: #3b5998,
      $github: #171515,
      $google: #db4437,
      $twitter: #55acee
    );
    

    在命令终端可以看到一个输入的 @debug 信息:

    DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)
  • 相关阅读:
    复盘:错误理解zuul路径匹配,无法使用zuul
    oracle 查询含clob 字段慢
    Javascript生成二维码(QR)
    那些可以在数据库里做的事:分页与过滤
    小谈Scrum敏捷开发流程
    45个实用的JavaScript技巧、窍门和最佳实践
    编写更好的jQuery代码的建议
    冷门JS技巧
    jQuery编程的最佳实践
    chrome扩展安装图文教程
  • 原文地址:https://www.cnblogs.com/kt520/p/5711740.html
Copyright © 2020-2023  润新知