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( ) 函數只能刪除字符串最前和最后的引號（雙引號或單引號），而無法刪除字符串中間的引號。如果字符沒有帶引號，返回的將是字符串本身。
