关于sass的map/list的问题

例如有一个值为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) {             // .#{$name}-img {                 border: 1px solid $color;                 background-image: url(../images/#{$name}.jpg);                 background-position: $pos;             // }         }     } } .wrap {     @include mediaImg($list-img); }

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

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

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