scss map nested

2019-02-12

layout散佈東一個西一個元素的畫面

會這樣做

<div class="decos">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>


position:reltive;

span{

&:nth-child(1){

position:absolute;

width:0px;

height:0px;

top:10px;

left:10px;

}

&:nth-child(2){etc ...}

&:nth-child(3){etc ...}

}



}

子元素們的位置大小定義會散落各地，不好維護

可以用scss的map結構改善這個問題

1定義巢狀的map結構

d1: (x:67,y:17,w:115,h:84),
d2: (x:14,y:198,w:60,h:64),
d3: (x:385,y:74,w:51,h:48),
d4: (x:30,y:642,w:193,h:406),
d5: (x:948,y:-107,w:115,h:84),
d6: (x:960,y:70,w:72,h:50),
d7: (x:19,y:1221,w:66,h:61),
d8: (x:1254,y:234,w:108,h:97),
d9: (x:1256,y:395,w:161,h:52)
);

2用each方法讀取map，map-get方法取得map結構裡的資料

因為$decos裡的資料也是map結構所以用了兩次map-get取得資料


@each $key, $val in $decos {
$i:index(($decos), ($key $val));
&:nth-child(#{$i}){
background-image: image-url("start/decos/#{$i}.png");
top:map-get(map-get($decos,d+$i),x)*1px;
left:map-get(map-get($decos,d+$i),y)*1px;
width:map-get(map-get($decos,d+$i),w)*1px;
height:map-get(map-get($decos,d+$i),h)*1px;
}
}

簡單愉快，收工!