2015年10月21日
@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>
a）$i表示变量
b）start表示起始值
c）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应用在网格系统生成各个格子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， 其遍历出来的终点值是13，其遍历出来的终点值是12， 就是<end>对就的值减去1。
while循环
@while指令也需要SassScript表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false时停止循环。这个和@for指令很相似，只要@while后面的条件为true就会执行。示例：
//SCSS
$types: 4;
$type-width: 20px;
@while $type > 0 {
.while-#{$types}{
width: $type-width + $types;
}
$types: $type - 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对应的样式块。
示例：
$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-kurior{
background: url("/images/avatars/kurior") no-repeat;
}
Sass的函数简介
在Sass中除了可以定义变量，具有@extend、%placeholder和mixins等特性之外，还自备了一系列的函数功能。其主要包括：
a）字符串函数
b）数字函数
c）列表函数
d）颜色函数
e）Introspection函数
f）三元函数等
当然除了自备的函数功能之外，我们还可以根据自己的需求定义函数功能，常常称之为自定义函数。
下面将给大家详细介绍前 4 种最常用的函数。
字符串函数-unquote()函数
字符串函数顾名思意是用来处理字符串的函数。Sass 的字符串函数主要包括两个函数：
a）unquote($string)：删除字符串中的引号；
b）quote($string)：给字符串添加引号。
1.unquote( )函数
unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。简单的使用终端来测试这个函数的运行结果：
//SCSS
.test1 {
content: unquote('Hello Sass!') ;
}
.test2 {
content: unquote("'Hello Sass!");
}
.test3 {
content: unquote("I'm Web Designer");
}
.test4 {
content: unquote("'Hello Sass!'");
}
.test5 {
content: unquote('"Hello Sass!"');
}
.test6 {
content: unquote(Hello Sass);
}
编译后的 css 代码：
//CSS
.test1 {
content: Hello Sass!; }
.test2 {
content: 'Hello Sass!; }
.test3 {
content: I'm Web Designer; }
.test4 {
content: 'Hello Sass!'; }
.test5 {
content: "Hello Sass!"; }
.test6 {
content: Hello Sass; }
注意：从测试的效果中可以看出，unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。
