关于sass的map的一些问题

问题描述

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

问题解答

/必须的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) {//需要引入现成的属性，参数加入属性mapline-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多次，不过为了灵活使用，暂时只想到这些了