关于sass的map的一些问题

Question

关于sass的map/list的问题

例如有一个嵌套格式的map

$breakpoints-map: (
    small:(
        min-width: 320px,
        base-font:12px,
        vertical-rhythm:1.3
    ),
    medium:(
        min-width: 480px,
        base-font:14px,
        vertical-rhythm:1.414
    ),
    large:(
        min-width: 960px,
        base-font:16px,
        vertical-rhythm:1.5
    )
);

然后弄一个@mixin，取到list中的内容，分别赋值给需要的CSS属性

@mixin mapListDome($map) {

    @each $key,$value in $map {
    
        @media screen and (min-width: map-get($value,min-width)) {
            font-size: map-get($value,base-font);
            line-height: map-get($value,vertical-rhythm);
            @content;
            
        }
    }
    
}

---

这样调用

 .wrap {
     @include mapListDome($breackpoints-map){
     height:auto;
  }

问题来了：

如果想在调用的时候新增一个属性，比如width，或者去掉一个属性，比如font-size，那么只能去修改$breakpoints-map或者修改mapListDome这个@mixin，很不方便，而{}内的是@centent定义的，只能输出相同的内容。

以前都是这样使用：

$viewpoints:(small:320px,medium:480px,large:960px);
$font-size:(small:12px,medium:14px,large:16px);
$vertical-rhythm:(small:1.3,medium:1.141,large:1.5);

@mixin mapListDome($map1,$map2:(),$map3:()){
    @each $key,$value in $map1{
        @media screen and (min-width:$value){

            //获取多个map中, 同名属性对应的值
                font-size:map-get($map2,$key);
                line-height:map-get($map3,$key);

        }
    }
}       

调用时，通过删减参数，增减CSS属性

  .wrap{
    @mapListDome($viewpoints);//不使用任何css属性
    @mapListDome($viewpoints,$font-size);//只使用font-size
    @mapListDome($viewpoints,$font-size,$vertical-rhythm);//使用全部属性
    }
    
  

但是这样写也有很多问题

1、要写很多遍small、meduim、large这样的重复属性名称
2、如果css属性很多，要传入大量map，很麻烦

补充：还有多重列表。。

$list-img: (
    (small, #000, 320px, 0 0),
    (medium, #f60, 480px, 0 -24px),
    (large, #f50, 960px, 0 -48px)
);

@mixin mediaImg($list) {
    @each $name, $color, $viewpoints, $pos in $list {
        @media screen and (min-width: $viewpoints) {
                border: 1px solid $color;
                background-image: url(../images/#{$name}.jpg);
                background-position: $pos;
        }
    }
}
.wrap {
    @include mediaImg($list-img);
}

看起来很方便，但是假设第三个list里漏掉一个960px,属性就全错位了，而且不会报错。

所以，关于map/list的使用，不知道有没有什么比较便捷的使用方法？

看了一些sass的框架。。发现写得都很麻烦，有的甚至map都没用，全是变量。。

Answer 1

谢邀，这个问题我也不会，帮你顶一下

Answer 2

翻墙去看了一下各种map的用法。。
最后是这么搞的。。

/必须的viewpoints媒体查询map
$viewpoints-breakpoints: (
    small: 480px,
    medium: 992px,
    large: 1200px
);
//可选css属性map(可以不使用)
$property-list: (
    small: (
        font-size: 14px,
        color: lighten(#333,75%),
        width: percentage(4/12)
    ),
    medium: (
        font-size: 16px,
        color: lighten(#333,50%),
        width: percentage(6/12)
    ),
    large: (
        font-size: 18px,
        color: lighten(#333,25%),
        width: percentage(7/12)
    )
);

//参数map-name为断点small,medium,large，它们也是嵌套层的名称
@mixin respond-list($map-name, $property: (), $viewpoints: $viewpoints-breakpoints) {
    //检查是否包含显示器分辨率断点
    @if map-has-key($viewpoints,$map-name) {
        //取得断点对应的分辨率值
        $view-width: map-get($viewpoints, $map-name);
        // 取得对应small,medium,large之一的内容，组成一个名为$map-in-key的新map
        $map-in-key: map-get($property,$map-name);
        @media screen and (min-width: $view-width) {
            //遍历$map-in-key这个新map中的属性名称和值，输出为css属性
            @each $key, $value in $map-in-key {
                #{$key}: $value;
            }
            @content;
        }
    }
    @else {
        //断点不合法或未写时，抛出错误信息
        @warn 'Unfortunately! The #{$map-name} is not a valid parameter or undefinded.';
    }
}

.dome-list {
    line-height: 1;
    color: #f65;

    @include respond-list(small) {
        //调用时，如不需要引入属性都自己写，只需写入断点
        line-height: 1.2;
    }
    @include respond-list(medium,$property-list) {
        //需要引入现成的属性，参数加入属性map
        line-height: 1.5;
    };
}

编译后：

.dome-list {
  line-height: 1;
  color: #f65
}
@media screen and (min-width: 480px) {
  .dome-list {
    line-height: 1.2
  }
}
@media screen and (min-width: 992px) {
  .dome-list {
    font-size: 16px;
    color: #b3b3b3;
    width: 50%;
    line-height: 1.5
  }
}

唯一一点麻烦的就是，一般断点都有2至5个不等，需要@include多次，不过为了灵活使用，暂时只想到这些了
顺便引入现成的map里的css属性后，自己写的如果有重复也没关系，因为@content里写的内容总在最后，css最后都是要用工具压缩的，比如cssnano，一压缩自己的写的后面的属性就把前面的覆盖了。