zoukankan      html  css  js  c++  java
  • Sass函数:Sass Maps的函数-map-get($map,$key)

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

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

    来看一个简单的示例,假设定义了一个 $social-colors 的 map:

    $social-colors: (
        dribble: #ea4c89,
        facebook: #3b5998,
        github: #171515,
        google: #db4437,
        twitter: #55acee
    );

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

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

    编译出来的CSS:

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

    我们来看另一种情况,假设 $social-colors 这个 map 没有 $weibo 这个 key:

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

    此时编译出来的是CSS:

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

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

  • 相关阅读:
    在CMD下用java命令出现“找不到或无法加载主类”问题
    去除后台ckeditor的style="...."的样式
    php图片上传
    html图片预览
    论文阅读
    论文阅读
    论文阅读
    论文阅读
    论文阅读
    论文阅读
  • 原文地址:https://www.cnblogs.com/qjuly/p/9116906.html
Copyright © 2011-2022 走看看