关于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的使用，不知道有没有什么比较便捷的使用方法？
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
/必须的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多次，不过为了灵活使用，暂时只想到这些了