問題描述

關(guān)于sass的map/list的問題

例如有一個(gè)嵌套格式的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 ));

然后弄一個(gè)@mixin，取到list中的內(nèi)容，分別賦值給需要的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; } } }

這樣調(diào)用

.wrap { @include mapListDome($breackpoints-map){ height:auto; }

問題來了：

如果想在調(diào)用的時(shí)候新增一個(gè)屬性，比如width，或者去掉一個(gè)屬性，比如font-size，那么只能去修改$breakpoints-map或者修改mapListDome這個(gè)@mixin，很不方便，而{}內(nèi)的是@centent定義的，只能輸出相同的內(nèi)容。

以前都是這樣使用：

$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){ //獲取多個(gè)map中, 同名屬性對應(yīng)的值font-size:map-get($map2,$key);line-height:map-get($map3,$key);} }}

調(diào)用時(shí)，通過刪減參數(shù)，增減CSS屬性

.wrap{ @mapListDome($viewpoints);//不使用任何css屬性 @mapListDome($viewpoints,$font-size);//只使用font-size @mapListDome($viewpoints,$font-size,$vertical-rhythm);//使用全部屬性 }

但是這樣寫也有很多問題

1、要寫很多遍small、meduim、large這樣的重復(fù)屬性名稱2、如果css屬性很多，要傳入大量map，很麻煩

補(bǔ)充：還有多重列表。。

$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);}

看起來很方便，但是假設(shè)第三個(gè)list里漏掉一個(gè)960px,屬性就全錯(cuò)位了，而且不會報(bào)錯(cuò)。

所以，關(guān)于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) ));//參數(shù)map-name為斷點(diǎn)small,medium,large，它們也是嵌套層的名稱@mixin respond-list($map-name, $property: (), $viewpoints: $viewpoints-breakpoints) { //檢查是否包含顯示器分辨率斷點(diǎn) @if map-has-key($viewpoints,$map-name) {//取得斷點(diǎn)對應(yīng)的分辨率值$view-width: map-get($viewpoints, $map-name);// 取得對應(yīng)small,medium,large之一的內(nèi)容，組成一個(gè)名為$map-in-key的新map$map-in-key: map-get($property,$map-name);@media screen and (min-width: $view-width) { //遍歷$map-in-key這個(gè)新map中的屬性名稱和值，輸出為css屬性 @each $key, $value in $map-in-key {#{$key}: $value; } @content;} } @else {//斷點(diǎn)不合法或未寫時(shí)，拋出錯(cuò)誤信息@warn 'Unfortunately! The #{$map-name} is not a valid parameter or undefinded.'; }}.dome-list { line-height: 1; color: #f65; @include respond-list(small) {//調(diào)用時(shí)，如不需要引入屬性都自己寫，只需寫入斷點(diǎn)line-height: 1.2; } @include respond-list(medium,$property-list) {//需要引入現(xiàn)成的屬性，參數(shù)加入屬性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 }}

唯一一點(diǎn)麻煩的就是，一般斷點(diǎn)都有2至5個(gè)不等，需要@include多次，不過為了靈活使用，暫時(shí)只想到這些了