/*使用自定义function和@each实现栅格布局*/
@function buildLayout($num: 5){
$map: (defaultValue: 0); //不能直接生成col,需要设置一个默认值 $rate: percentage(1 / $num); //均分并取百分数 @for $i from 1 through $num{ //1为起始值,5为终止值遍历生成 $tmpMap: (col#{$i} : $rate * $i); //定义好key和value $map: map-merge($map,$tmpMap); //写入新的map } $map:map-remove($map,defaultValue); //删除默认值 @return $map; //返回新的map}@mixin buildLayout($num: 5){ $map:buildLayout($num); @each $key,$value in $map{ .#{$key}{ width: $value; } }}@debug buildLayout(); //因为有默认值所以可不传递参数,否则必须传
/*控制台输出结果: col1:20%,col2:40%,col3:60%,col4:80%,col5:100% */@include buildLayout(10);//根据传递的参数来均分栅格,10就是10份