@if
@if 指令是一个SassScript,它可以根据条件处理样式块，如果条件为true返回一个样式块，反之
false 返回另一个样式块，在Sass 中除了@if之，还可以配合@else if和eles 一起。
例如：
//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循环（上）
在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 throug 3 { .item-#{$i} { 2em *$i; } }
编译出来css
.item-1{ 2em; } .item-2{ 4em; } .item-3{ 6em; }
在来一个to关键字的例子：
@for $i from to 3 { .item-#{$i} { 2em * $i;} }
编译出来的css:
.item-1{ width：2em; } .item-2{ width：4em; }
@for循环（下）
@for 应用在网格系统生成各个格子class 的代码。
//scss
$grid-prefix: span !default; $grid-60px !defaulet; $grid-gutter:20px !defaulet; %grid{ float:left; margin-left:$grid-gutter / 2; margin-right:$grid-gutter / 2; } @for $i from 1 through 12 { .#{$grid-prefix} #{$i}{ $grid-width *$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{
60px;
}
.span2{
140px;
}
.span3{
220px;
}
.span4{
300px;
}
.span5{
380px;
}
.span6{
400px;
}
.span7{
540px;
}
.span8{
620px;
}
.span9{
700px;
}
.span11 {
860px;
}
.span12 {
940px;
}
将上面的示例稍做修改，将 @for through 方式换成 @for to:：
//scss
@for $i from 1 to 13{ . #{$grid-prefix}#{$i}{ $grid-width * $i + $grid-grutter *($i -1); @extend %grid; } }
这两段 Sass 代码并无太多差别，只是 @for中的 <end> 取值不同。配合 through 的 <end> 值是 12，
其遍历出来的终点值也是 12，和 <end> 值一样。配合 to 的 <end> 值是 13，其遍历出来的终点值是 12，
就是 <end> 对就的值减去 1
@while 循环
@while指令也需要SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为false
时停止循环。这个和@for 指令很相似，只要@while 后面的条件为true就会执行。
例如：
//SCSS
$types:4; $type-20px; @while $types > 0{ .while-#{$types} $type-width + $types; } $types: $types - 1;
编译出来css
.while-4{ 24px; } .while-3{ 23px; } .while-2{ 22px; } .while-1{ 21px; }
@each循环
@each循环就是去遍历一个列表，依然从列表中取出对应的值。
@each 循环指令的形式：
@each $var in <list>
例如：
@mixin author-images{ @each $author in $list { .photo-#{$author}{ background:url("/images/avatars/#{$author}.png") no-repeat; } } } .anthor-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/wynn.png") no - repeat; }
Sass的函数简介
函数主要包括。
字符串函数
数字函数
列表函数
颜色函数
Interospection函数
三元函数等。
字符串函数-unquote() 函数
字符串函数顾名思义是用来处理字符串的函数，Sass 的字符串函数要包括两种。
unquote($string): 删除字符串中的引号
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( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。
如果字符没有带引号，返回的将是字符串本身。
字符串函数-quote()函数
quote()函数刚好与unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号
会统一换成双引号。
// SCSS
.test1{ content: quote( 'Hello Sass!' ); } .test2{ content: quote("Hello Sass!") } .test3{ content: quote(ImWebDesigner); } .test4{ content: quote(' '); }
编译出来的css 代码
// css
.test1{ content: "Hello Sass!"; } .test2{ content: "Hello Sass!" } .test3{ content: "ImWebDesigner"; } .test4{ content: ""; } 使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，
需要用单引号或双引号括起，否则编译的时候将会报错。
字符串函数-To-upper-case(),To-lower-case()
1.To-upper-case(),To-lower-case() To-upper-case() //SCSS .test { text:to-upper-case(aaaaa); text:to-upper-case(aA-aAAA-aaa); }
编译出来的css 代码
// CSS
.test{ text:AAAAA; text:AA-AAAA-AAA; }
2.To-lower-case()
To-lower-case() 函数 与To-upper-case()刚好相反，将字符串转成小写字母。
// SCSS
.test{ text: to-lower - cass(AAAAA); text: to-lower-case(aA-aAAA-aaa) }
编译出来的 css 代码；
//css
.test{ text: aaaaa; text:aa-aaaa-aaa; }
数字函数简介
Sass 中的数组函数要针对数字方面提供一系列的函数功能:
percentage($value):将一个不带单位的数转换成百分比：
round($value):将数值四舍五入，转换成一个最接近的整数；
ceil($value):将大于自己的小数转换成下一位整数；
floor($value):将一个数去除他的小数部分；
abs($value):返回一个数的绝对值。
min($numbers...) 找出几个数之间的最小值：
max($numbers...)找出几个数值之间的最大值
random() 获取随机数。
数字函数-percentage()
1.percentage()
percentage() 函数主要是将一个不带单位的数字转成 百分比形式：
>> percentage(.2)
20%
>>percentage(2px / 10px)
20%
>>percentage(2em / 10em)
20%
>>
.footer{
percentage(.2)
}
编译后的css 代码;
.footer{
width：20%；
}
数字函数-round() 函数
round()函数可以将一个数四舍五入为一个最近的整数;
>>round(12.3)
12
>> round(12.5)
13
>>round(1.499999)
1
>>round(20%)
20%
>>round(3.9em)
4em
>>round(2.3px)
2px
>>round(1px /3px)
0
>>round(3px / 2em)
2px/em
.footer{
round(12.3px)
}
编译出来的css
.footer{
12px;
}
数字函数-ceil()函数
ceil()函数将一个数转换成最接近自己的整数，会讲一个大约自身的任何小数转换成大约本身1的整数，也就是只做入，不做舍的
>> ceil(2.0)
2
>>ceil(2.1)
3
>>ceil(2.6)
3
>>ceil(2.3%)
3%
>>ceil(2.5px)
3px
>>ceil(2px / 3px)
1
>>ceil(2% / 3px)
1%/px
>>ceil(1em / 5px)
1em/px
.footer{
ceil(12.3px);
}
编译后的css 代码：
.footer{
13px;
}
数字函数-floor()函数
floor()函数刚好与ceil()函数功能相反，其主要将一个数去除其小数部分。并且不做任何的进位，也就是只做舍，不做入的计算。
>> floor(2.1)
2
>> floor(2.5)
2
>>floor(3.5%)
3%
>>floor(10.2px)
10em
>> floor(10.2px)
10px
>>floor(10.8em)
10em
>>floor(2px / 10px)
0
>> floor(3px / 1em)
3px /em
.footer{
floor(12.3px);
}
编译后的css代码
.footer{
12px;
}
数字函数-abs() 函数
abs()函数会返回一个数的绝对值。
>>abs(10)
10
>>abs(-10)
10
>>abs(-10px)
10px
>>abs(-2em)
2em
>>abs(-.5%)
0.5%
>>abs(-1px / 2px)
0.5
.footer{
abs(-12.3px)
}
编译后的css代码：
.footer{
12px;
}
数字函数-min()函数，max()函数
min() 函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数。
>>min(1,2,1%,3.300%)
1%
>> min(1px,2,3px)
1px
>>min(1em,2em,6em)
1em
不过在min() 函数中同时出现两种不同类型的单位，将会报错误信息。
>>min(1px, 1em)
SyntaxError: Incompatible units:'em' and'px'.
max()函数
max()函数和min函数一样，不同的是,max() 函数用来获取一系列书数中的最大那个值。
>> max(1,5)
5
>>max(1px,5px)
5px
同样的，如果在max()函数中有不同的单位，将会报错：
>> max(1,3px,5%,6)
SyntaxError: Incompatible units: '%' and ‘px'.
数字函数-random()函数
random()函数是用来获取一个随机数。
>> random()
0.03886
>>random()
0.66527
>> random()
0.8125
>>random()
0.26839
>>random()
0.85065
列表函数介绍
列表函数主要包括一些对列表参数的函数使用，主要包括以下几种形式。
length($list):返回一个列表的长度值：
nth($list,$n):返回一个列表中指定的某个标签值。
join($list1,$list2,[$separator] ):将某个值放在列表的最后；
zip($lists...);将几个列表结合成一个多维的列表：
index($list,$value)返回一个值在列表中的位置值。
length()函数
length()函数主要用来返回一个列表的中有几个值，简单点说就是返回列表清单中有多少个值：
>>length(10px)
1
>>length(10px 20px (border 1px solid) 2em)
4
>>length(border 1px solid)
3
length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错；
>> length(10px, 20px,(border 1px solid),2em)
SyntaxError: wrong number of arguments(4 for 1) for'length
nth($list,$n)
nth()函数用来指定列表中某个位置的值，不过在Sass 中，nth()函数和其他语法不同，1 是指列表中的第一个标签值
2 是指列表中的第二个标签值。
>> nth(10px 20px 30px,1)
10px
>>nth((Helvetica,Arial,sans-serif),2)
"Arial"
>>nth((1px solid red) border-top green,1)
(1px "solid" #ff0000)
在nth($list,$n) 函数中的$n 必须是大于 0 的整数；