sass—使用自定义function和@each实现栅格布局
Posted lindablog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了sass—使用自定义function和@each实现栅格布局相关的知识，希望对你有一定的参考价值。
/*使用自定义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份
以上是关于sass—使用自定义function和@each实现栅格布局的主要内容，如果未能解决你的问题，请参考以下文章