MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » Sass的统制命令(循环)

Sass的统制命令(循环)

www.myexceptions.net  网友分享于:2015-11-19  浏览:0次
Sass的控制命令(循环)

@if
@if指令是一个SassScript,它可以根据条件来处理样式块,如果条件为true返回一个样式块,反之false返回另一个样式块。在Sass中除了@if,还可以配合@else if@else 一起使用。

 1 $lte7: true;
 2 $type: monster;
 3 .ib{
 4     display:inline-block;
 5     @if $lte7 {
 6         *display:inline;
 7         *zoom:1;
 8     }
 9 }
10 p {
11     @if $type == ocean {
12         color: blue;
13     } @else if $type == matador {
14         color: red;
15     } @else if $type == monster {
16         color: green;
17     } @else {
18         color: black;
19     }
20 }

编译成CSS:

1 //css style
2 .ib{
3     display:inline-block;
4     *display:inline;
5     *zoom:1;
6 }
7 p {
8     color: green; 
9 }

假设要控制一个元素隐藏或显示,我们就可以定义一个混合宏,通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示:

 1 //SCSS
 2 @mixin blockOrHidden($boolean:true) {
 3     @if $boolean {
 4         @debug "$boolean is #{$boolean}";
 5         display: block;
 6     }
 7     @else {
 8         @debug "$boolean is #{$boolean}";
 9         display: none;
10     }
11 }
12 .block {
13     @include blockOrHidden;
14 }
15 .hidden{
16     @include blockOrHidden(false);
17 }

编译出来的CSS:

1 .block {
2     display: block;
3 }
4 .hidden {
5     display: none;
6 }

 

 

 

@for循环(上)
在 Sass 的 @for 循环中有两种方式

@for $i from <start> through <end>
@for $i from <start> to <end>
  • $i 表示变量
  • start 表示起始值
  • end 表示结束值

这两个的区别是关键字through表示包括end这个数,而to不包括end这个数。

从 <start> 开始循环,到 <end> 结束
如下代码,使用through关键字的例子:

1 @for $i from 1 through 3{
2     .item-#{$i} {width: 2em * $i;}
3 }

编译出来的 CSS:

1 .item-1 {
2     width: 2em;
3 }
4 .item-2 {
5     width: 4em;
6 }
7 .item-3 {
8     width: 6em;
9 }

从 <start> 开始(此处示例是1),一直遍历到 <end> (此处示例是3)。包括 <end> 的值。

to关键字的例子:

1 @for $i from 1 to 3{
2     .itme-#{$i} { width: 2 * $i;}
3 }

编译出来的 CSS:

1 .item-1 {
2     width: 2em;
3 }
4 .item-2 {
5     width: 4em;
6 }

循环从 <start> 开始,一直遍历循环到 <end> 结束。这种形式的循环只要碰到 <end> 就会停止循环(将不会遍历 <end> 值)。

@for循环(下)

@for应用在网格系统生成各个格子 class 的代码:

 1 //SCSS 
 2 $grid-prefix: span !default;
 3 $grid-width: 60px !default;
 4 $grid-gutter: 20px !default;
 5 %grid {
 6     float: left;
 7     margin-left: $grid-gutter / 2;
 8     margin-right: $grid-gutter / 2;
 9 }
10 @for $i from 1 through 12 {
11     .#{$grid-prefix}#{$i}{
12         width: $grid-width * $i + $grid-gutter * ($i - 1);
13         @extend %grid;
14     } 
15 }

编译出来的 CSS:

 1 .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
 2     float: left;
 3     margin-left: 10px;
 4     margin-right: 10px;
 5 }
 6 .span1 {
 7     width: 60px;
 8 }
 9 .span2 {
10     width: 140px;
11 }
12 .span3 {
13     width: 220px;
14 }
15 .span4 {
16     width: 300px;
17 }
18 .span5 {
19     width: 380px;
20 }
21 .span6 {
22     width: 460px;
23 }
24 .span7 {
25     width: 540px;
26 }
27 .span8 {
28     width: 620px;
29 }
30 .span9 {
31     width: 700px;
32 }
33 .span10 {
34     width: 780px;
35 }
36 .span11 {
37     width: 860px;
38 }
39 .span12 {
40     width: 940px;
41 }

 @for 循环指令除了可以从小数值到大数值循环之外,还可以从大数值循环到小数值。而且两种形式都支持(递增或递减)

 

 

@while循环
@while指令也需要SassScript表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为false时停止循环。这个和@for指令很相似,只要@while后面的条件为true就会执行。
@while指令简单用例:

1 //SCSS
2 $types: 4;
3 $type-width: 20px;
4 @while $types > 0 {
5     .while-#{$types}{
6         width: $type-width + $types;
7     }
8     $types: $types - 1;
9 }

编译出来的 CSS:

 1 .while-4 {
 2     width: 24px;
 3 }
 4 .while-3 {
 5     width: 23px;
 6 }
 7 .while-2 {
 8     width: 22px;
 9 }
10 .while-1 {
11     width: 21px;
12 }

 

 

 

@each循环

@each循环就是去遍历一个列表,然后从列表中取出对应的值。
@each循环指令形式:

@each $var in <list>

 $var 就是一个变量名, <list> 是一个SassScript表达式,他将返回一个列表值。变量 $var 会在列表中做出遍历,并且遍历出与 $var 对应的样式块
这有一个 @each 指令的简单示例:

 1 $list: adam john wynn mason kuroir;//$list 就是一个列表
 2 
 3 @mixin author-images {
 4     @each $author in $list {
 5         .photo-#{$author} {
 6             background: url("/images/avatars/#{$author}.png") no-repeat;
 7         }
 8     }
 9 }
10 
11 .author-bio {
12     @include author-images;
13 }

编译出CSS:

 1 .author-bio .photo-adam {
 2     background: url("/images/avatars/adam.png") no-repeat;
 3 }
 4 .author-bio .photo-john {
 5     background: url("/images/avatars/john.png") no-repeat; 
 6 }
 7 .author-bio .photo-wynn {
 8     background: url("/images/avatars/wynn.png") no-repeat; 
 9 }
10 .author-bio .photo-mason {
11     background: url("/images/avatars/mason.png") no-repeat; 
12 }
13 .author-bio .photo-kuroir {
14     background: url("/images/avatars/kuroir.png") no-repeat; 
15 }

 

文章评论

5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
编程语言是女人
编程语言是女人
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
Java程序员必看电影
Java程序员必看电影
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员都该阅读的书
程序员都该阅读的书
漫画:程序员的工作
漫画:程序员的工作
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
 程序员的样子
程序员的样子
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
每天工作4小时的程序员
每天工作4小时的程序员
程序员应该关注的一些事儿
程序员应该关注的一些事儿
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
10个调试和排错的小建议
10个调试和排错的小建议
如何成为一名黑客
如何成为一名黑客
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
鲜为人知的编程真相
鲜为人知的编程真相
一个程序员的时间管理
一个程序员的时间管理
我的丈夫是个程序员
我的丈夫是个程序员
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
我是如何打败拖延症的
我是如何打败拖延症的
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
老程序员的下场
老程序员的下场
旅行,写作,编程
旅行,写作,编程
那些争议最大的编程观点
那些争议最大的编程观点
程序员的鄙视链
程序员的鄙视链
代码女神横空出世
代码女神横空出世
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员必看的十大电影
程序员必看的十大电影
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员和编码员之间的区别
程序员和编码员之间的区别
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有