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份

原文地址:https://www.cnblogs.com/LindaBlog/p/10396646.html

时间: 2024-10-08 10:35:48

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

bootstrap记录二(关于栅格布局)

栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需要定义一层来包含行(.row),这个外层为(.container)或者(.container-fluid),定义这一层是为了方便为行(.row)赋予合适的排列(aligment)和内补(padding). (.container)表示固定宽度,即行的宽度是固定的,而且水平居中,即使行的元素是块级元素

响应式设计(2)--引入bootstrap栅格布局

bootstrap为我们内置了栅格系统布局,通过它,我们可以非常快速的在不同宽度的屏幕下进行自适应布局. [grid栅格系统]http://v3.bootcss.com/css/#grid  [响应式工具]http://v3.bootcss.com/css/#responsive-utilities 不了解bootstrap栅格布局的同学,可以先看看上面的链接,了解个大概. 你真的了解吗?只要你了解个大概的话,就能回答的出下面几个问题,回答不出来的话,点开上面的链接好好看一遍 1)bootstr

简述Bootstrap栅格布局方式

栅格系统用于通过行(row)和列(column)组合创建页面布局,内容可以放入创建好的布局中. Bootstrap栅格系统的工作原理: “行(row)”必须包含在 .container中,以便为其赋予合适的排列(aligment)和内补(padding)通过    点container可以将界面放入浏览器的中间位置. 使用“行(row)”在水平方向创建一组“列(column)”. 你的内容应当放置于“列(column)”内,而且,只有“列(column)”可以作为行(row)”的直接子元素. 类

CSS:谈谈栅格布局

检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: 1 * { 2 box-sizing: border-box; 3 } 4 html, body{ 5 width: 100%; 6 height: 100%; 7 margin: 0; 8 } 9 .container{ 10 width:100%; 11 } 12 .container:after{ 13 di

grid栅格布局

前面的话 Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格.本文将详细介绍grid布局 引入 对于Web开发者来说,网页布局一直是个比较重要的问题.但实际上,在网页开发很长的一段时间当中,我们甚至没有一个比较完整的布局模块.总的来说 Web 布局经历了以下四个阶段: 1.table表格布局,通过 Dreamweaver 拖拽表格或者手写 table 标签布局 2.float浮动及position定位布局,借助元素元素盒模型本身的特性

Bootstrap 框架 栅格布局系统设计原理

如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下载了源代码进行分析了一番,看完之后果然有了收获,不过我只看了栅格布局的那块代码,其实也很简单,不必担心不懂,你只需要要基础的CSS知识即可. 前提条件(Bootstrap 自带) 首先使用这个布局之前要定义一下代码: 这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会

bootstrap栅格布局学习历程

了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户的判断纯在一定的精准性问题,目前来讲实现响应式方式有两种:css3 @media :第三方的开源框架.    框架帮我们解决的工作量,低端浏览器不支持的css3的问题,不同分辨率下的网页布局的展示.他是移动优先的前端框架. 这里的话,我只用里面的栅格布局,其他的样式什么的,就自己定制. 当然在开始之

浅谈css的栅格布局

栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优点,简单好用的特性使得栅格布局成为所有主流框架的必备的功能. 我们简单分析一下栅格布局的原理: 容器/行/列/栅间距 一个栅格布局需要3部分组成--容器(container),行(row),列(column,也可称为栅).容器是用于确定宽度的,行需要放到容器中:行是将列分组,并把一组列合并为一个行:

【转】Bootstrap 框架 栅格布局系统底层设计原理

如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下载了源代码进行分析了一番,看完之后果然有了收获,不过我只看了栅格布局的那块代码,其实也很简单,不必担心不懂,你只需要要基础的CSS知识即可. 前提条件(Bootstrap 自带) 首先使用这个布局之前要定义一下代码: 这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会