sass揭祕之@if,@for,@each(轉載)

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

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

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

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

@if

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

$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的東西其實也就是這麼多,轉來轉去就轉回來了。github

既然有@if,那確定有@else啊bootstrap

$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用==,!=分別表示等於與不等於。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裏面表現不同吧。ruby

@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

相關文章
相關標籤/搜索