zoukankan      html  css  js  c++  java
  • 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:

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

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

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

    返回的值:

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

    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)
    批量的给小图标改颜色(多皮肤设置也可以)
    
     1 @mixin bgColors($args...){//表示传入多个参数,用了“...”符号
     2 
     3   $list: keywords($args);
     4 
     5   @each $x,$y in $list{//用一个each,循环变量colors列表里的键值对
     6 
     7     .bg_#{$x}{
     8 
     9       background-color:#{$y};
    10     }
    11   }
    12 
    13 }
    14 
    15 @include bgColors(//调用函数,并传入需要设置值得参数
    16 
    17   $weibo: #f00,
    18 
    19   $QQ : #0f0,
    20 
    21   $weixin: #00f,
    22 
    23   $github: #000
    24 
    25 )

    编译后:

     1 .bg_weibo {
     2 
     3   background-color: #f00; }
     4 
     5 .bg_QQ {
     6 
     7   background-color: #0f0; }
     8 
     9 .bg_weixin {
    10 
    11   background-color: #00f; }
    12 
    13 .bg_github {
    14 
    15   background-color: #000; }
  • 相关阅读:
    SAP PI 如何实现消息定义查询
    EWM与ERP交互程序
    ITS Mobile Template interpretation failed. Template does not exist
    SAP Material Flow System (MFS) 物料流系统简介
    SAP EWM Table list
    EWM RF 屏幕增强
    SAP EWM TCODE list
    SAP扩展仓库管理(SAPEWM)在线研讨会笔记
    ERP与EWM集成配置ERP端组织架构(二)
    EWM RF(Radio Frequency)简介
  • 原文地址:https://www.cnblogs.com/qjuly/p/9122734.html
Copyright © 2011-2022 走看看