sass揭祕之@if，@for，@each（轉載）

由於文章內含有不少sass代碼，如需本身動手查看編譯結果，推薦使用sassmeister這款在線編譯工具，方便你閱讀學習。

通過上兩篇揭祕，你們內心對sass應該有了很好的認知感了，這篇文章基於前面兩篇爲基礎，請確保你先瀏覽了前面的兩篇文章，否則可能給你帶來疑惑感受。

1.  sass揭祕之變量
2.  sass揭祕之@mixin，%，@function

這篇文章關鍵是對sass判斷或循環的語法熟悉下，至於邏輯這東西，和其餘的語言如js，php什麼的是同樣同樣的，沒什麼說頭。通過前兩篇的積累，也就不須要那麼囉嗦了，因此只寫scss代碼。如今你就能夠想一想css若是用上這些東西會是什麼樣子的呢？

@if

這個@if就不用解釋吧，一看都知道是條件判斷。這個東西對於瀏覽器兼容這塊能夠出很多力量；而後對於寫一些基礎的scss，控制樣式的輸出也是一大利器；固然還有不少不少了，反正是個必備的好東西就是了。先來個簡單的例子吧：

$lte7:true !default;//是否兼容ie6,7 //inline-block //ie6-7 *display: inline;*zoom:1; @mixin inline-block { display: inline-block; @if $lte7 { *display: inline;*zoom:1; } } 

若是變量$lte7爲真，就輸出*display: inline;*zoom:1;，這個例子看着有點熟悉吧，前面@mixin已經說了，哈哈。sass的東西其實也就是這麼多，轉來轉去就轉回來了。

既然有@if，那確定有@else啊

$filter:false !default; //是否開啓ie濾鏡 //背景色半透明 @mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){ color:#fff; @if $filter{ filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}'); }@else{ background-color: #333; } background-color:$bgcolor; } 

這是半透明rgba背景的一段代碼，高級瀏覽器用rgba，ie6-8若是開啓濾鏡用濾鏡，不開啓濾鏡就用純色，經常使用於圖片下方浮現標題。至於多條件的，能夠參考sass揭祕之@mixin,%,@function裏面的神來之筆的@mixin prefixer

固然也不可能老是判斷一個變量的真假那麼簡單，沒有或與非的狀況吧。sass的@if用not,or,and分別表示非，或，與。

$a: false !default; $b: true !default; @if not($a){ p{ color:red; } } div{ font-size:14px; @if $a or $b{ width:300px; } } li{ line-height:24px; @if $a and $b{ float:left; } } 

想一想仍是漏了個，sass用==,!=分別表示等於與不等於。

$radius: 5px !default; .box-border{ border:1px solid #ccc; padding:10px; @if $radius != 0{ border-radius:$radius; } } $sizeClass: small !default; .size{ @if $sizeClass == 'small'{ padding:5px; }@else{ padding:10px; } } 

是否是感受很簡單，原本就沒什麼特別的，判斷和循環邏輯都是同樣的，就是可能sass裏面表現不同吧。

@for

for循環有兩種形式，分別爲：@for $var from through 和@for $var from to 。$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。先來個簡單的：

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

上面的那個實例幾乎用不着，哈哈因此實際上是沒什麼養分的東西，只是幫助理解了原來@for是這麼回事。怎麼的也不能就這麼忽悠你們啊，你們好不容易抽空看下文章，就這麼點扯淡的東西怎麼對得住呢。下面再來個養分級別的，@for應用在網格系統生成各個格子class的代碼：

// class span1-$gridColumns // span的class循環輸出，經過變量$gridSpanSwitch來控制是否輸出 //----------------------------------------------------- $gridColumns: 12 !default; $gridcolumnWidth: 60px !default; $gridGutter: 20px !default; %span-base{ float:left; margin-left:$gridGutter / 2; margin-right:$gridGutter / 2; } @for $i from 1 through $gridColumns { .span#{$i} { @extend %span-base; width:($gridcolumnWidth + $gridGutter) * $i - $gridGutter; } } 

解析後的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; }

這樣一循環，比一個個寫爽多了吧，由於float和margin什麼的都同樣，因此咱們使用佔位選擇器申明，而後@extend調用，那樣就是組合申明瞭。固然若是你要一個更復雜的包括百分比和固定寬度切換的能夠看下sassCore中的_grid.scss，這個網格系統就很強大了。

@each

語法：@each $var in

循環一個列表裏面全部的值，而後去作點什麼唄，那到底作點什麼呢，這是個問題。你能夠先想個三分鐘試試，咱們如今能用@each給css賦予什麼魅力。

我來扯點其餘的。其實@for和@each仍是不多用的，可是隻要它一上場，對於css來講通常都具備神來之筆，這就是要麼不出手，一出手就震驚全場。

好了，插了上面一段後，咱們來講說@each的官方實例：

@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } 

解析後的css：

.puma-icon { background-image: url('/images/puma.png'); } .sea-slug-icon { background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } .salamander-icon { background-image: url('/images/salamander.png'); }

上面是對icon class的定義，不過icon如今你們通常都用sprite去作，因此這種單獨的不多了，不過能夠一樣用這個來設置background-position，假設這個sprite圖片是寬30px，高120px，每一個icon大小爲30px*30px：

$sprite: puma sea-slug egret salamander !default; %sprite-animal{ background: url('/images/animal.png') no-repeat; } @each $animal in $sprite { .#{$animal}-icon { @extend %sprite-animal; background-position:0 -(index($sprite,$animal)*30px); } } 

解析後的css：

.puma-icon, .sea-slug-icon, .egret-icon, .salamander-icon { background: url("/images/animal.png") no-repeat; } .puma-icon { background-position: -30px; } .sea-slug-icon { background-position: -60px; } .egret-icon { background-position: -90px; } .salamander-icon { background-position: -120px; }

看起來仍是比較帥的哈哈，可是sprite的圖片有這麼規整的仍是不多的，如今有些網站搞sprite圖片搞得太狠了，通常一個sprite那是包含各類大小的圖片啊，不過這種網站若是維護頻繁的話，那簡直就是挖了天坑啊。

除了上面的sprite的運用，咱們再來講個拍案叫絕的吧。自從bootstrap之後，框架遍地開花，而估計每一個裏面都會有的就是按鈕的樣式，而按鈕的樣式通常都要分顏色，大小吧，甚至按鈕組。每一個顏色一個class，每一個大小還一個class，但是咱們實際用的時候呢，估計能用個三分之一就不錯了，反正最後就是那些定義好的按鈕的樣式遠遠超過了咱們的需求，多大的浪費啊。

如今咱們借用sass的@each就能幫咱們控制這個問題，實用出發，須要什麼就生成什麼，不鋪張不浪費。

//$btnColorClass: (primary #0078E7 #fff) (green $green #fff); $btnColorClass: (primary #0078E7 #fff) (blue #00A3CF #fff) (orange #F47837 #fff) !default; @mixin btn-color($bgColor:#e6e6e6, $textColor:#333){ color:$textColor; background-color: $bgColor; border:1px solid darken($bgColor, 5%); border-color:lighten($bgColor, 2%) darken($bgColor, 5%) darken($bgColor, 5%) lighten($bgColor, 2%); &:hover{ background-color: darken($bgColor,5%); color:$textColor; } } @each $colorClass in $btnColorClass{ $class: nth($colorClass,1); $bgColor: nth($colorClass,2); $textColor: nth($colorClass,3); .btn-#{$class}{ @include btn-color($bgColor,$textColor); } } 

解析後的css：

.btn-primary { color: white; background-color: #0078e7; border: 1px solid #006bce; border-color: #007df1 #006bce #006bce #007df1; } .btn-primary:hover { background-color: #006bce; color: white; } .btn-blue { color: white; background-color: #00a3cf; border: 1px solid #008fb5; border-color: #00abd9 #008fb5 #008fb5 #00abd9; } .btn-blue:hover { background-color: #008fb5; color: white; } .btn-orange { color: white; background-color: #f47837; border: 1px solid #f3681f; border-color: #f57f41 #f3681f #f3681f #f57f41; } .btn-orange:hover { background-color: #f3681f; color: white; }

輕鬆搞定，咱們默認有三個顏色，如今若是咱們要搞本身的顏色，直接按照第一篇sass揭祕之變量來從新定義下變量就ok了，這裏你能夠直接去掉那段註釋//$btnColorClass: (primary #0078E7 #fff) (green $green #fff);就會解析成這兩種class。如今你除了發表感嘆「真牛B」以外，你也許還會想這是怎麼出來的。不明覺厲啊。

下面詳細展開下：

其實這裏的核心就是$btnColorClass這個變量，也許你之前看到的就是一個變量對應一個值，若是你看了前面兩篇文章，你會看到一個變量對應兩個或多個值，而這裏又升級了，對應了好多個啊，並且仍是有組織的。簡單來講這就跟js的數組差很少，至關於數組裏面還有數組。

這裏補充個知識，sass的列表值大體有三種形式分隔，分別爲空格，逗號和小括號。空格比較常見，逗號還好了，咱們說的第一個@each的官網案例，$list就是以逗號分隔的。

如今轉回來，咱們這個$btnColorClass，使用了兩種分隔，空格和小括號，咱們@each循環先獲得用小括號分隔的，而後再在@each裏面經過nth取得小括號裏面用空格分開的列表值。說完了，就這麼簡單，忽然發現把變量說完了，這個答案就解開了。

@if，@for，@each就算講完了，固然還有一個@while，暫時還沒太用它，也沒什麼特別的，因此就不說了，之後有用到絕妙之處再來講。

通過這三篇sass揭祕文章，你們對sass的瞭解也應該深刻許多了，是否是發現它原來還有如此的迷人魅力。揭祕到這裏，其實你們如今能夠去分析下sassCore的源碼了，其實這三篇文章裏面好多東西都是從sassCore裏面抽出來的，sassCore自己的代碼比這些可能要複雜點，可是若是你對着三篇文章理解沒問題的，sassCore源碼也不會是問題，若有問題可在羣中提問

sass揭祕暫時到此爲止，休息一段時間，若是反響比較好的話，將繼續爲你們說下sass實戰，包括給我之前寫的那篇淺析sass死亡在團隊合做中 文章一個答案。

 如需轉載，煩請註明出處：http://www.w3cplus.com/preprocessor/sass-advanced-application.html