关于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,很不方便,而{}内的是@cen优艾设计网_设计百科tent定义的,只能输出相同的内容。
以前都是这样使用:
$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都没用,全是变量。。
精彩评论