博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
sass—使用自定义function和@each实现栅格布局
阅读量:6706 次
发布时间:2019-06-25

本文共 674 字,大约阅读时间需要 2 分钟。

/*使用自定义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份

转载于:https://www.cnblogs.com/LindaBlog/p/10396646.html

你可能感兴趣的文章
Cocos Creator socket.io打包Apk后无法连接
查看>>
Vue基础知识总结(一)
查看>>
使用JNA解决自动化测试无法做密码输入操作的问题
查看>>
Android ViewDragHelper完全解析 自定义ViewGroup神器
查看>>
mysql简单优化思路
查看>>
tomcat并发优化之三种接收处理请求方式(BIO、NIO、APR)介绍
查看>>
归并排序的实现
查看>>
[日常] C语言中的字符数组和字符串
查看>>
from disk cache 与 from memory cache
查看>>
应用图片加载服务与第三方实现库的解耦
查看>>
高并发的核心技术-幂等的实现方案
查看>>
微波炉炖蛋
查看>>
C#调用C/C++ DLL 参数传递和回调函数的总结
查看>>
非spring组件servlet、filter、interceptor中注入spring bean
查看>>
SQL Server中SELECT会真的阻塞SELECT吗?
查看>>
class path and classloader
查看>>
文字检测与识别 资源
查看>>
外包筛选心得
查看>>
Warning: skipping non-radio button in group
查看>>
Android 悬浮窗权限校验
查看>>