在制作网格系统的时候,大家应该对 .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 。

Sass-@for的更多相关文章

  1. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  5. SASS教程sass超详细教程

    SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...

  6. Sass之坑Compass编译报错

    前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...

  7. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  8. Sass用法指南

    写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...

  9. PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

    如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...

  10. Sass:初识Sass与Koala工具的使用

    一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...

随机推荐

  1. Jmeter的JDBC请求执行多条SQL语句

    注:有mysqlconnector/j 3.1.1以上版本才支持执行多条sql语句 1.     下载jdbc驱动为了连接Mysql数据库,还需要有个jdbc驱动:mysql-connector-ja ...

  2. 阿里云如何打破Oracle迁移上云的壁垒

    2018第九届中国数据库技术大会,阿里云数据库产品专家萧少聪带来以阿里云如何打破Oracle迁移上云的壁垒为题的演讲.Oracle是指“数据库管理系统”,面对Oracle迁移上云的壁垒,阿里云如何能够 ...

  3. OC + RAC(七) RACSubject和RACSignal的区别

    -(void)_test8{ /// RACSubject继承自RACSignal 但是RACSubject和RACSignal的区别? //1能接收1,2 //但是2只能接收2 RACSubject ...

  4. CSU 1551 Longest Increasing Subsequence Again(树状数组 或者 LIS变形)

    题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1551 升级版:Uva 1471 题意: 让你求删除一段连续的子序列之后的LIS. 题 ...

  5. ModuleNotFoundError: No module named 'mysql'

    问题:使用sqlalchemy初始化数据库报错,如图: 解决办法: pip install mysql-connector 安装后即可正常运行了 参照: https://blog.csdn.net/j ...

  6. 第 1 章 前端之html

    一.html初始 1.web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM ...

  7. State Hook

    1 useState函数的第一个参数,是state变量的初始值. 2 每次渲染时,多个State Hook的顺序.数量都是一样的.(不能多.不能少) 3 state变量是只读的 4 state变量发生 ...

  8. hdu6575Budget

    Problem Description Avin’s company has many ongoing projects with different budgets. His company rec ...

  9. Git003--创建版本库

    Git--创建版本库 本文来自于:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 ...

  10. 图解Http阅读笔记(二)

    简单的HTTP协议 HTTP是一种不保存状态,即无状态(stateless)协议.HTTP 协议自身不对请求和响应之间的通信状态进行保存.也就是说在 HTTP 这个级别,协议对于发送过的请求或响应都不 ...