sass09
scss
/*
1、使用自定义function和@each实现栅格布局。
@function buildLayout($num: 5){ } 结果:
col1{width: 20%}
col2{width: 40%}
...
*/ @function buildLayout($num: 5){
$map:(defaultValue:0);
$rate:percentage(1 / $num);
@for $i from 1 through $num{
$tmpMap:(col#{$i}: $rate * $i);
$map:map-merge($map,$tmpMap);
}
$map:map-remove($map,defaultValue);
@return $map;
} @mixin buildLayout($num:5){
$map:buildLayout($num);
@each $key,$value in $map{
.#{$key}{
width:$value;
}
}
}
@include buildLayout(10);
@debug buildLayout(10);
css
@charset "UTF-8";
/*
1、使用自定义function和@each实现栅格布局。
@function buildLayout($num: 5){ } 结果:
col1{width: 20%}
col2{width: 40%}
...
*/
.col1 {
width: 10%;
} .col2 {
width: 20%;
} .col3 {
width: 30%;
} .col4 {
width: 40%;
} .col5 {
width: 50%;
} .col6 {
width: 60%;
} .col7 {
width: 70%;
} .col8 {
width: 80%;
} .col9 {
width: 90%;
} .col10 {
width: 100%;
} /*# sourceMappingURL=demo1.css.map */
sass09的更多相关文章
随机推荐
- mybatis插入操作时,返回自增主键id
mapper.xml 代码 <insert id="insert" parameterType="com.Student" > <select ...
- [terry笔记]python购物程序
如下是一个购物程序: 先输入工资,显示商品列表,购买,quit退出,最后格式化输出所买的商品. count = 0 while True: #做一个循环判断,如果输入的不是数字,基于提示,三次后退出 ...
- 2015 Multi-University Training Contest 8 hdu 5384 Danganronpa
Danganronpa Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Tot ...
- NYIST 1107 最高的奖励
最高的奖励 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 请问:挖掘机技术哪家强?AC了告诉你! 给你N(N<=3*10^4)个任务,每个任务有一个截止完成时 ...
- atitit。流程图的设计与制作 attilax 总结
atitit.流程图的设计与制作 attilax 总结 1. 流程图的规范1 2. 画图语言2 2.1. atitit.CSDN-markdown编辑器2 2.2. js-sequence-diagr ...
- 使用TensorBoard可视化工具
title: 使用TensorBoard可视化工具 date: 2018-04-01 13:04:00 categories: deep learning tags: TensorFlow Tenso ...
- Kettle的四大不同环境工具
不多说,直接上干货! kettle里有不同工具,分别用于ETL的不同阶段. 初学者,建议送Spoon开始.高手,是四大工具都会用. Sqoop: 图形界面工具,快速设计和维护复杂的ETL工作流.集成开 ...
- 配置 NTP 时间服务器
对于我们当前这种案例,主要目标是把 z01 这台服务器设置为时间服务器,剩下的 z02,z03 这两台机器同步 z01 的时间,我们需要这样做的原因是因为,整个集群架构中的时间,要保持一致. ** 检 ...
- HD-ACM算法专攻系列(7)——Text Reverse
问题描述: 源码: /**/ #include"iostream" #include"string" using namespace std; void Pri ...
- 前端模块化 | 解读JS模块化开发中的 require、import 和 export
本篇分为两个部分 第一部分:总结了ES6出现之前,在当时现有的运行环境中,实现"模块"的方式: 第二部分:总结了ES6出现后,module成为ES6标准,客户端实现模块化的解决方案 ...