关于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的使用，不知道有没有什么比较便捷的使用方法？

Answer 1

/必须的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多次，不过为了灵活使用，暂时只想到这些了