Sass-@for
2024-10-07 13:56:17
在制作网格系统的时候，大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写，但在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式：
@for $i from <start> through <end>
@for $i from <start> to <end>
- $i 表示变量
- start 表示起始值
- end 表示结束值
这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。
如下代码，先来个使用 through 关键字的例子：
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
再来个 to 关键字的例子：
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
编译出来的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
@for应用在网格系统生成各个格子 class 的代码：
//SCSS
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default; %grid {
float: left;
margin-left: $grid-gutter / 2;
margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}
编译出来的 CSS:
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
float: left;
margin-left: 10px;
margin-right: 10px;
}
.span1 {
width: 60px;
}
.span2 {
width: 140px;
}
.span3 {
width: 220px;
}
.span4 {
width: 300px;
}
.span5 {
width: 380px;
}
.span6 {
width: 460px;
}
.span7 {
width: 540px;
}
.span8 {
width: 620px;
}
.span9 {
width: 700px;
}
.span10 {
width: 780px;
}
.span11 {
width: 860px;
}
.span12 {
width: 940px;
}
将上面的示例稍做修改，将 @for through 方式换成 @for to:：
//SCSS
@for $i from 1 to 13 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}
其最终编译出来的 CSS 代码和上例所编译出来的一模一样。
这两段 Sass 代码并无太多差别，只是 @for中的 <end> 取值不同。配合 through 的 <end> 值是 12，其遍历出来的终点值也是 12，和 <end> 值一样。配合 to 的 <end> 值是 13，其遍历出来的终点值是 12，就是 <end> 对就的值减去 1 。
最新文章
- Sublime Text 3 常用插件以及安装方法(转)
- Linux环境下Oracle数据库启动停止命令
- mac 下载安装 IntelliJ IDEA Tomcat
- hdu Strange fuction
- poj 3625 Building Roads
- 【转】ACE开发环境搭建
- ASP.NET MVC and jqGrid 学习笔记 4-排序
- Qt 学习之路：自定义事件
- Linux系统下快速删除某个目录下大量文件
- Kill Process by Name
- BZOJ 1176: [Balkan2007]Mokia( CDQ分治 + 树状数组 )
- MAC安装Securecrt破解
- solaris启动过程详解
- javascript学习（4）异常处理 try-catch 和 onerror
- Android图表库MPAndroidChart(十一)——多层级的堆叠条形图
- 【Storm篇】--Storm基础概念
- web富文本编辑器收集
- Install VirtualBox Guest Additions for elementary os
- ASP 基础三 SQL指令
- oracle 查看表行数所占空间大小