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的更多相关文章

随机推荐

  1. mybatis插入操作时,返回自增主键id

    mapper.xml 代码 <insert id="insert" parameterType="com.Student" > <select ...

  2. [terry笔记]python购物程序

    如下是一个购物程序: 先输入工资,显示商品列表,购买,quit退出,最后格式化输出所买的商品. count = 0 while True: #做一个循环判断,如果输入的不是数字,基于提示,三次后退出 ...

  3. 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 ...

  4. NYIST 1107 最高的奖励

    最高的奖励 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 请问:挖掘机技术哪家强?AC了告诉你! 给你N(N<=3*10^4)个任务,每个任务有一个截止完成时 ...

  5. atitit。流程图的设计与制作&#160;attilax&#160;总结

    atitit.流程图的设计与制作 attilax 总结 1. 流程图的规范1 2. 画图语言2 2.1. atitit.CSDN-markdown编辑器2 2.2. js-sequence-diagr ...

  6. 使用TensorBoard可视化工具

    title: 使用TensorBoard可视化工具 date: 2018-04-01 13:04:00 categories: deep learning tags: TensorFlow Tenso ...

  7. Kettle的四大不同环境工具

    不多说,直接上干货! kettle里有不同工具,分别用于ETL的不同阶段. 初学者,建议送Spoon开始.高手,是四大工具都会用. Sqoop: 图形界面工具,快速设计和维护复杂的ETL工作流.集成开 ...

  8. 配置 NTP 时间服务器

    对于我们当前这种案例,主要目标是把 z01 这台服务器设置为时间服务器,剩下的 z02,z03 这两台机器同步 z01 的时间,我们需要这样做的原因是因为,整个集群架构中的时间,要保持一致. ** 检 ...

  9. HD-ACM算法专攻系列(7)——Text Reverse

    问题描述: 源码: /**/ #include"iostream" #include"string" using namespace std; void Pri ...

  10. 前端模块化 | 解读JS模块化开发中的 require、import 和 export

    本篇分为两个部分 第一部分:总结了ES6出现之前,在当时现有的运行环境中,实现"模块"的方式: 第二部分:总结了ES6出现后,module成为ES6标准,客户端实现模块化的解决方案 ...