2-1 Sass的控制命令
@if
@if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用。
假设要控制一个元素隐藏或显示,我们就可以定义一个混合宏,通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示:
//SCSS @mixin blockOrHidden($boolean:true) { @if $boolean { @debug "$boolean is #{$boolean}"; display: block; } @else { @debug "$boolean is #{$boolean}"; display: none; } } .block { @include blockOrHidden; } .hidden{ @include blockOrHidden(false); }
编译出来的CSS:
.block { display: block; } .hidden { display: none; }
@for循环(上)
在制作网格系统的时候,大家应该对 .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循环 (下)
上一小节的那个实例几乎用不着,哈哈,所以其实是没什么营养的东西,只是帮助理解了原来 @for 是这么回事。怎么的也不能就这么忽悠大家啊,大家好不容易抽空看下文章,就这么点扯淡的东西怎么对得住呢。下面再来个营养级别的,@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 。
@while循环
@while 指令也需要 SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为 false 时停止循环。这个和 @for 指令很相似,只要 @while 后面的条件为 true 就会执行。
这里有一个 @while 指令的简单用例:
//SCSS $types: 4; $type-width: 20px; @while $types > 0 { .while-#{$types} { width: $type-width + $types; } $types: $types - 1; }
编译出来的 CSS
.while-4 { width: 24px; } .while-3 { width: 23px; } .while-2 { width: 22px; } .while-1 { width: 21px; }
@each循环
@each 循环就是去遍历一个列表,然后从列表中取出对应的值。
@each 循环指令的形式:
@each $var in <list>
如果你没有接触过列表,也不要紧,他也非常简单。
在下面的例子中你可以看到,$var 就是一个变量名,<list> 是一个 SassScript 表达式,他将返回一个列表值。变量 $var 会在列表中做遍历,并且遍历出与 $var 对应的样式块。
这有一个 @each 指令的简单示例:
$list: adam john wynn mason kuroir;//$list 就是一个列表 @mixin author-images { @each $author in $list { .photo-#{$author} { background: url("/images/avatars/#{$author}.png") no-repeat; } } } .author-bio { @include author-images; }
编译出 CSS:
.author-bio .photo-adam { background: url("/images/avatars/adam.png") no-repeat; } .author-bio .photo-john { background: url("/images/avatars/john.png") no-repeat; } .author-bio .photo-wynn { background: url("/images/avatars/wynn.png") no-repeat; } .author-bio .photo-mason { background: url("/images/avatars/mason.png") no-repeat; } .author-bio .photo-kuroir { background: url("/images/avatars/kuroir.png") no-repeat; }
2-1 Sass的控制命令的更多相关文章
- Sass的控制命令(循环)
@if@if指令是一个SassScript,它可以根据条件来处理样式块,如果条件为true返回一个样式块,反之false返回另一个样式块.在Sass中除了@if,还可以配合@else if和@else ...
- Sass控制命令及函数知识整理
2017-07-07 20:17:17 最底部附结构图(实在是结构图太长了没办法) 2017-06-22 09:11:43 一.Sass的控制命令 1.@if语句 @if 指令是一个 SassSc ...
- Linux 视频设备驱动V4L2最常用的控制命令
http://blog.csdn.net/shaolyh/article/details/6583226 Linux 视频设备驱动V4L2最常用的控制命令使用说明(1.02) 命令 功能 VIDIOC ...
- oracle-SQL语言基础-事务控制命令命令
事务控制命令命令 COMMITROLLBACKSAVEPOINTSET TRANSACTION 当第一条可执行的SQL语句开始执行,数据库事务就开始.随着下面任一事件发生,数据库事务结束:执行COMM ...
- 使用python+Selenium对空调控制器进行循环发送控制命令
今天一同事说想对空调控制器进行循环发送命令操作.经过了对控制流程的梳理,发现每次选择内机后进入控制页面设定温度都是在26度,想了想,如果要进行循环就得将设定温度重置为17度,然后每循环一次温度增加1度 ...
- webRTC中音频相关的netEQ(四):控制命令决策
上篇(webRTC中音频相关的netEQ(三):存取包和延时计算)讲了语音包的存取以及网络延时和抖动缓冲延时的计算,MCU也收到了DSP模块发来的反馈报告.本文讲MCU模块如何根据网络延时.抖动缓冲延 ...
- 自学Linux Shell15.2-作业控制命令(jobs/bg/nice/renice/at/atp/atrm/crontab)
点击返回 自学Linux命令行与Shell脚本之路 15.1-作业控制命令(jobs/bg/nice/renice/at/atp/atrm/crontab) 1 控制作业 1.1查看作业 (jobs ...
- Matlab绘图控制命令
[转载] 图形的控制与表现 (Figure control and representation) MATLAB提供的用于图形控制的函数和命令: axis: 人工选择坐标轴尺寸. clf: ...
- Oracle数据库存量数据抽取使用spool控制命令
spool是oracle sqlplus提供的一个控制命令.可以利用spool和select语句的组合动态生成一些失去了脚本或者一些数据. 1.spool作用: 在sqlplus中用来保存或打印查询 ...
随机推荐
- 使用 WebClient 來存取 GET,POST,PUT,DELETE,PATCH 網路資源
WebClient 基本資訊 提供通用方法使用 WebRequest 類別傳送及接收 URI (支援 http:, https:, ftp:,和 file: ) 的資源 Namespace:Syste ...
- 虚拟立方体调用非共享维度的时候需要指定cubeName,否则Schema无效
但是,即使把非共享维度放上去,会出现一种情况. 一旦放入资产负债的非公共维度进去后,报表的度量值只能出现资产负债的度量值,不能出现损益的度量值了!
- Idea中更改主题后xml配置文件局部黄色背景颜色去除
相信很多小伙伴和我一样一样的,喜欢更换Idea的主题,但是细心的小伙伴就发现了,每次更改主题后xml配置文件就会局部产生黄色背景颜色,对于强迫症患者真的是够了,网上也有部分文章,但是不够详细,也跟Id ...
- 主流服务器虚拟化技术简单使用——Hyper-V(二)
当在多台Windows Server上部署了hyper-v的时候,需要采用合适的方法管理这些hyper-v节点. 远程桌面 最简单的方法就是逐台远程桌面登陆Windows Server,再使用每台本地 ...
- LTE
LTE (telecommunication), Long Term Evolution, a telephone and mobile broadband communication standar ...
- [转] HBase 深入浅出
[From] https://www.ibm.com/developerworks/cn/analytics/library/ba-cn-bigdata-hbase/index.html HBase ...
- Servlet入门小案例
案例一:tomcat9.jdk1.8 1.eclipse创建web项目 1)创建一个Dynamic web project,名字为Servlet_hjh 2)在src下创建一个包,为com.hjh.d ...
- 封装element-ui的dialog组件
封装组件: <template> <div class="dialog-container"> <el-dialog title="titl ...
- Mac开发利器之程序员编辑器MacVim学习总结(转)
一.关于Vim Emacs和Vim都是程序员专用编辑器,Emacs被称为神的编辑器,Vim则是编辑器之神.至于两者到底哪个更好用,网络上两大派系至今还争论不休.不过,相比之下,Emacs更加复杂, ...
- 【随笔】node.js + npm的安装
需要用到node.js和npm,所以来安装下. 在网上找了找教程,好多都是分开装的,各种麻烦各种事,最后还是在node.js官网里下载解决了.记录一下. 如果安装在当前环境,直接点击install会自 ...