Scss中使用map定义变量后的取值

Maps可视为键值对的集合,键被用于定位值 在css种没有对应的概念。 和Lists不同Maps必须被圆括号包围,键值对被都好分割 。 Maps中的keys和values可以是sassscript的任何对象。

定义简单的map

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
) !default;

map-get取单个值

map-get($colors, 'blue');

@each循环使用

@each $color, $value in $colors {
      &.btn-#{$color} {
        @include button-color($value);
      }
}

更多使用方法

函数 功能 示例
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)}

查看详细官方文档说明

  • 1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,有些不正确的地方,仅供参考。
  • 2.本站中会转载我认为有用的博客文章,添加一些外链网站地址,但这些博客文章、论坛和网站上的内容和我没有关系,不代表我的意见,请网友自己多注意辨别。
  • 3.本站中转载文章会写明来源(点击下方链接按钮即可),感谢原作者的辛苦写作,如果有异议,及时联系我处理,谢谢!
  • 4.欢迎指出有问题的地方,我会尽快修正,谢谢!

系统由 Nginx + Next.js + React + Node + TailWindCss 驱动

沪ICP备20021316号