欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Sass函数map_html/css_WEB-ITnose

程序员文章站 2022-04-23 12:11:33
...
Map
Sass 的 map 常常被称为数据地图,也有人称其为数组,是以 key:value 成对的出现。

1 $map: (2  $key1: value1,3  $key2: value2,4  $key3: value35 )

首先有一个类似于 Sass 的变量一样,用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 (),将数据以 key:value 的形式赋予,其中 key 和 value 是成对出现,并且每对之间使用逗号 (,) 分隔,其中最后一组后面没有逗号。
其中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。

1 $default-color: #fff !default;2 $primary-color: #22ae39 !default;

1 $color: (2  default: #fff,3  primary: #22ae394 );

你需要新增加颜色变量值,在 map 中可以非常随意的添加:

1 $color: (2  default: #fff,3  primary: #22ae39,4  negative: #d9534f5 );

可以让 map 嵌套 map。里面可以继续放一对或者多对 key:value:

1 $map: (2  key1: value1,3  key2: (4  key-1: value-1,5  key-2: value-2,6  ),7  key3: value38 );

有碰到过换皮肤的项目,可能每一套皮肤对应的颜色蛮多的,那么使用此功能来管理颜色的变量就非常的有条理性,便于维护与管理。你可以这样使用:

 1 $theme-color: ( 2  default: ( 3  bgcolor: #fff, 4  text-color: #444, 5  link-color: #39f 6  ), 7  primary:( 8  bgcolor: #000, 9  text-color:#fff,10  link-color: #93f11  ),12  negative: (13  bgcolor: #f36,14  text-color: #fefefe,15  link-color: #d4e16  )17 );

Sass Maps的函数

前面介绍了使用 map 来管理变量,但要在 Sass 中获取变量,或者对 map 做更多有意义的操作,我们必须借助于 map 的函数功能。在 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的函数-map-get($map,$key)
    map-get($map,$key) 函数的作用是根据 $key 参数,返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中,将返回 null 值。此函数包括两个参数:

    $map:定义好的 map。$key:需要遍历的 key。

    假设定义了一个 $social-colors 的 map:

    1 $social-colors: (2  dribble: #ea4c89,3  facebook: #3b5998,4  github: #171515,5  google: #db4437,6  twitter: #55acee7 );

    假设要获取 facebook 键值对应的值 #3b5998,可以使用 map-get() 函数来实现:

    1 .btn-dribble{2  color: map-get($social-colors,facebook);3 }

    编译出来的CSS:

    1 .btn-dribble {2  color: #3b5998;3 }

    假设 $social-colors 这个 map 没有 $weibo 这个 key:

    1 .btn-weibo{2  font-size: 12px;3  color: map-get($social-colors,weibo);4 }

    此时编译出来的是CSS:

    1 .btn-weibo {2  font-size: 12px;3 }

    如果 $key 不在 $map 中,不会编译出 CSS,其实在 Sass 中,map-get($social- colors,weibo) 返回了一个 null 值。但在编译出来的 CSS 中,你只知道他没有编译出样式,而且在命令终端编译时,也没有任何错误或者警告信息。你并不知道他为什么编译不出来样式,或者说他已返回了值为 null。体验不强,也不好排错。如果我们自定义一个函数,另外加个判断,那就截然不同。

    Sass Maps的函数-map-has-key($map,$key)
    map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中这个 $key,则函数返回 true,否则返回 false。
    当 $key 不在 $map 中时,使用 map-get($map,$key) 函数将返回一个 null 值。但对于开发人员,并看不到任何提示信息。如果使用 map-has-key($map,$key) 函数就可以改变这一状态。
    自定义一个函数,比如 colors():

     1 @function colors($color){ 2  @if not map-has-key($social-colors,$color){ 3  @warn "No color found for `#{$color}` in $social-colors map. Property omitted."; 4 } 5  @return map-get($social-colors,$color); 6 } 7 .btn-dribble { 8  color: colors(dribble); 9 }10 .btn-facebook {11  color: colors(facebook);12 }13 .btn-github {14  color: colors(github);15 }16 .btn-google {17  color: colors(google);18 }19 .btn-twitter {20  color: colors(twitter);21 }22 .btn-weibo {23  color: colors(weibo);24 }

    使用终端编译有报错提示。

    编译出来的 CSS:

     1 .btn-dribble { 2  color: #ea4c89; 3 } 4  5 .btn-facebook { 6  color: #3b5998; 7 } 8  9 .btn-github {10  color: #171515;11 }12 13 .btn-google {14  color: #db4437;15 }16 17 .btn-twitter {18  color: #55acee;19 }

    同时命令终端提示信息:

    WARNING: No color found for `weibo` in $social-colors map. Property omitted.on line 13 of test.scss

    可以使用 @each:

    1 @each $social-network,$social-color in $social-colors {2  .btn-#{$social-network} {3  color: colors($social-network);4     }5 }

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

    map-keys($social-colors);

    其返回的值为:

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

    1 $list: map-keys($social-colors);2 //相当于:3 $list:"dribble","facebook","github","google","twitter";

    例:

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

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

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

    @each:

    1 @each $name in map-keys($social-colors){2  .btn-#{$name}{3  color: colors($name);4     }5 }

    @for:

    1 @for $i from 1 through length(map-keys($social-colors)){2  .btn-#{nth(map-keys($social-colors),$i)} {3  color: colors(nth(map-keys($social-colors),$i));4     }5 }

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

    1 map-values($social-colors)2 //将会返回:3 #ea4c89,#3b5998,#171515,#db4437,#55acee

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

     1 $color: ( 2  text: #f36, 3  link: #f63, 4  border: #ddd, 5  backround: #fff 6 ); 7 $typo:( 8  font-size: 12px, 9  line-height: 1.610 );

    两个 $map 合并成一个 map:

    $newmap: map-merge($color,$typo);

    将会生成一个新的 map:

    1 $newmap:(2  text: #f36,3  link: #f63,4  border: #ddd,5  background: #fff,6  font-size: 12px,7  line-height: 1.68 );

    这样你就可以借助 map-get()等函数做其他事情了。
    注意:如果 $map1 和 $map2 中有相同的 $key 名,那么将 $map2 中的 $key 会取代 $map1 中的:

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

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

    返回的是一个新 map:

    1 $map:(2  facebook: #3b5998,3  github: #171515,4  google: #db4437,5  twitter: #55acee6 );

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

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

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

     1 @mixin map($args...){ 2  @debug keywords($args); 3 } 4 @include map( 5  $dribble: #ea4c89, 6  $facebook: #3b5998, 7  $github: #171515, 8  $google: #db4437, 9  $twitter: #55acee10 );

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

    DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)
    相关标签: Sass函数map