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

sass—使用自定义function和@each实现栅格布局的更多相关文章

  1. bootstrap(关于栅格布局)

    栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...

  2. iOS 瀑布流之栅格布局

    代码地址如下:http://www.demodashi.com/demo/14760.html 一 .效果预览 二.确定需求 由下面的需求示意图可知模块的最小单位是正方形,边长是屏幕宽除去边距间隔后的 ...

  3. Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  4. Bootstrap3.0的栅格布局系统实现原理

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  5. CSS栅格布局

    CSS栅格布局 认识栅格布局 CSS的栅格布局也被称为网格布局(Grid Layout),它是一种新兴的布局方式. 栅格布局是一个二维系统,这意味着它可以同时处理列和行,与弹性布局相似,栅格系统也是由 ...

  6. 浅谈css的栅格布局

    栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...

  7. Bootstrap栅格布局系统的特点

    栅格布局系统的特点: (1)所有的行必须放在容器中: .container或.container-fluid (2)分为多行(row),一行中平均分为12列(col) (3)网页内容只能放在列(col ...

  8. CSS:谈谈栅格布局

    检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...

  9. bootstrap笔记-栅格布局

    1.   .clearfix 这个类可以在栅格布局中起到一个不占空间的clear的作用,如下:可以尝试带.clearfix和不带它的区别 <div class="container-f ...

随机推荐

  1. [转帖]Linux中的15个基本‘ls’命令示例

    Linux中的15个基本‘ls’命令示例 https://linux.cn/article-5109-1.html ls -lt 和 ls -ltr 来查看文件新旧顺序. list time rese ...

  2. P2256 一中校运会之百米跑(map映射加并查集)

    真心水,也许只有我这样的蒟蒻能做这种题了吧.用STL中的map将所有人的名字映射成一个数字,然后就是并查集的裸题 #include<bits/stdc++.h> using namespa ...

  3. WebViewClient 与 WebChromeClient

    WebViewClient帮助WebView处理各种通知和请求事件的,我们可以称他为WebView的“内政大臣”.常用的shouldOverrideUrlLoading就是该类的一个方法,比如: on ...

  4. Android NDK(C++) 双进程守护

    双进程守护如果从进程管理器观察会发现新浪微博.支付宝和QQ等都有两个以上相关进程,其中一个就是守护进程,由此可以猜到这些商业级的软件都采用了双进程守护的办法. 什么是双进程守护呢?顾名思义就是两个进程 ...

  5. 清明培训 清北学堂 DAY1

    今天是李昊老师的讲授~~ 总结了一下今天的内容: 1.高精度算法 (1)   高精度加法 思路:模拟竖式运算 注意:进位 优化:压位 程序代码: #include<iostream>#in ...

  6. Android学习第8天

    进程的概念 a)        四大组件都运行在主线程中 b)        服务是没有界面的,可理解为没有界面的Activity c)         进程的优先级 i.              ...

  7. Django+Vue打造购物网站(五)

    注册和登陆 drf的认证 http://www.django-rest-framework.org/api-guide/authentication/ settings.py文件的配置 INSTALL ...

  8. Java集合:HashMap底层实现和原理(源码解析)

    Note:文章的内容基于JDK1.7进行分析.1.8做的改动文章末尾进行讲解. 一.先来熟悉一下我们常用的HashMap: 1.概述 HashMap基于Map接口实现,元素以键值对的方式存储,并且允许 ...

  9. bash 字符串处理

    bash 字符串处理 字符串切片:${var:offset:length}示例:[root@localhost ~]#mypath="/etc/sysconfig/network-scrip ...

  10. Disconf 分布式配置管理平台(安装配置)

    Disconf 分布式配置管理平台(安装配置) 依赖环境 Nginx:处理静态资源请求.动态请求转发到Tomcat Tomcat:处理Nginx的请求 Redis:用户session管理 MySQL: ...