聲明:　　請尊重博客園原創精神,轉載或使用圖片請注明:　　博主:xing.org1^　　出處:http://www.cnblogs.com/padding1015/

特別說明:

沒有sass基礎請移步:【Sass-學習筆記【基礎篇】】http://www.cnblogs.com/padding1015/articles/7056323.html

最底部附結構圖(實在是結構圖太長了沒辦法)2017-07-07 ?20:17:17?

正文

一、Sass的控制命令 ?2017-06-22 ?09:11:43

1.@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);}

自己寫了一個代碼:

 1 //SCSS 2  3 @mixin bAh($y:ture){ 4  5     @if $y{ 6  7         @debug "這里顯示#{$y}"; 8  9         display: block;11     }13     @else{14 15         @debug "這里顯示#{$y}";16 17         display: none;19     }21 }25 .block{26 27     @include bAh;29 }31 .hidden{33     @include bAh(false);35 }

有趣的有兩點:

• 首先,@debug這里可以做數學運算(后期學到)甚至sass運算,

比如插值,插進來變量“形參”(其實混合宏聲明的地方的參數就像js中函數function右邊小括號里的形參一樣,

而調用時傳的參數就好像函數調用的時候的實參一樣。),直接就給轉換成“實參”了

• 其次,聲明混合宏的參數(形參)處,變量等于true不是用雙等號(==),而是用冒號(:),

做了一個實驗是,這里還可以不寫:true;的設定,)(比如上邊的示例第27行,bAh調用混合宏的時候什么也沒有傳參,

因為聲明的時候,參數里就默認讓變量先為true了;)

【而下邊這個示例,聲明宏的時候沒有給定他是ture還是false,但是第13行,在調用的時候,我block選擇器中傳入的參數也不是true而是一個字符串true112,她依舊認成了ture】

 1 @mixin bAh($y){ 2     @if $y{ 3         @debug "這里顯示#{$y}"; 4         display: block; 5     } 6     @else{ 7         @debug "這里顯示#{$y}"; 8         display: none; 9     }10 }12 .block{13     @include bAh(true112);14 }15 .hidden{16     @include bAh(false);17 }

?可見,在調用的時候,“實參”里隨便放點東西,只要不是false,他都認成true,并對應解析@if{}內的樣式代碼塊。

至于其他除了false以外的是不是都適用成true暫時還不太確定,有待實驗說明。

2.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 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應用在網格系統生成各個格子 class 的代碼:

2017-06-22 12:52:13

?先看一個錯誤的代碼:圖中黃色塊的位置,找了半天原因,把字母都換成了英文的重寫n遍都沒解決問題,最后拿來一個正確的復制過來換了變量名字就對了,

對比才發現$i后邊的空格這么大,還是一個,肯定就不是英文半角的空格,換成英文格式重輸空格后bug就解決了?？磥砭褪撬膯栴},即使空格也要用英文半角

$span : span !default;?// 準備一個選擇器名放到變量中?；蛘卟粶蕚?使用的時候直接寫span好了,不用插值#{}插進去了

$sWidth: 60px !default;??//定義一個span的寬度

$sGap: 20px !default;??//定義一個間距的寬度

%grid{??//準備一個占位,放上公用的樣式塊

　　float: left;

　　margin-left: $sGap / 2;

　　margin-right: $sGap / 2;

}

@for $i from 1 through 12{??//在1-12內循環,包括12。根據之前的學習,這里的 " through 12 " 也可以改成“ to 13”;最后結果一樣,都是1-12遍歷

　　.#{$span}#{$i}{?//給1-12編號的span定義不同、遞增的寬度,并調用占位符以引用相同的代碼塊

width: $sWidth * $i;//寬度這里總是想這么寫,最后總是忘記中間間隔的計算

　　　　width: $sWidth * $i + sGap * ($i - 1);

@extend %grid; //別忘了引用之前準備好的代碼塊

　　}

}

3.@while循環

@while 指令也需要 SassScript 表達式(像其他指令一樣),并且會生成不同的樣式塊,直到表達式值為 false 時停止循環。

這個和 @for 指令很相似,只要 @while 后面的條件為 true 就會執行。

示例:

$nums: 4;?? //注意,Sass的變量賦值是用冒號(:)而不是像js那樣的等號;

$nums_width: 200px;

@while $nums >= 0{? //條件不用包裹在括號里

　　.while#{$nums}{

　　　　width: $nums_width + $nums;

　　}

　　$nums : $nums - 1;?? //遞減:不用? --? 或? -=,而是重新賦值為原值減一。注意用冒號賦值

}

?編譯的css

.while1{

　　width:204px;}

.while2{

　　width:203px;}

.while3{

　　width:202px;}

.while4{

　　width:201px;}

4.@each循環

?@each循環就是去遍歷一個表格,然后從表格中取出對應的值。

語法:

@each $var in <list>

$var : 一個變量名,

<list>一個列表,返回一個列表值,變量$var要在其中循環遍歷,

該SassScript表達式返回一個符合$var條件的列表值。遍歷出與$var 對應的樣式塊。

簡單示例:用來批量制作icon圖標引用或者背景圖引用等。

$list3: name11 name22 name33 name44 name55;@mixin hunheh{??? @each $i in $list3{??????? .span#{$i}{??????????? background: url("/images/#{$i}.jpg") no-repeat;??????? }??? }}

.p{??? @include hunheh}

獲取的css:

.p .spanname11 {? // 如果不需要類名組,直接在全局中調用混合宏就行了。background: url("/images/name11.jpg") no-repeat; }.p .spanname22 {background: url("/images/name22.jpg") no-repeat; }.p .spanname33 {background: url("/images/name33.jpg") no-repeat; }.p .spanname44 {background: url("/images/name44.jpg") no-repeat; }.p .spanname55 {background: url("/images/name55.jpg") no-repeat; }

?二、Sass函數及其功能

【注意】:屬性與函數調用之間的冒號(:)不能省略,而且必須是英文半角格式。

用percentage函數做示例

分類:

• 字符串函數
• 數字函數
• 列表函數
• 顏色函數
• Introspection函數
• 三元函數
• 自定義函數(根據自己的需求定義函數功能)
• ...其他一些函數等

前四種最常用

?1.字符串函數

字符串函數顧名思義就是用來處理字符串的函數

A) unquote:刪除字符串的引號(單/雙引)【去引號】

• 語法格式:

　　:unquote($string);

• 使用規則:

1. unquote只能刪除字符串最前邊和最后邊的引號,沒法去掉中間的引號。
2. 不管是雙引號還是單引號包裹的字符串,引號皆被去掉;
3. 如果字符串沒有帶引號,則返回原字符串;
4. 若引號中,有半個不成對的引號,不會被去掉,一般是英文中的's用法;【因為unquote只能刪除字符串最前邊和最后邊的引號,沒法去掉中間的引號?！?/li>

• 示例:

SCSS

CSS

B)quote:給字符串添加引號(雙引號)【加引號】

• 語法格式

　　:quote($string)

• 使用規則:

1. 若字符串本身帶有引號,就不添加;
2. 若字符串帶有單引號,則跟換為雙引號;
3. 若雙引號中有單引號,則不變,單引號不受影響;
4. 若字符串中間有空格或者半塊的單引號、雙引號時,需要用單引號或雙引號括起,不然編譯會報錯【解決方案就是去掉空格,或者加上引號】
5. 碰到特殊符號,比如:?!、?、>?等,除中折號 -?和下劃線_?都需要使用雙引號括起,否則編譯器在進行編譯的時候同樣會報錯:

• ?示例:

SCSS

CSS

• ?注意:

——單引號變成雙引號:如——

.test4 {　　content: quote(' ');}

轉換后的css

.test4 {　　content: quote(" ");}

—— 以下寫法會報錯:【正如第四條】——

.test3 {　　content: quote(ImWebDesigner's);}

error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote')

?就是類似 ’s 這樣的寫法。

?——特殊符號報錯——

error style.scss (Line 13: Invalid CSS after "...quote(HelloSass": expected ")", was "!);")

C)to-upper-case:將小寫字母轉換成大寫【小——大】

• 語法格式

　　:to-upper-case(string);

D)to-lower-case:將大寫字母轉換成小寫【大——小】

• 語法格式

　　:to-upper-case(string);

to-upper和to-lower:二者綜合使用規則

1. 字符串中有引號也沒有關系
2. 字符串中有特殊字符也沒有關系

2.數字函數

A) percentage($value):將一個不帶單位的數轉換成百分比值

• 結果/公式:　　$value * 100%

　　三種寫法:

1 .footer{2     width : percentage(.2);3     height: percentage(2px / 10px);4     margin: percentage(2em / 10em);5 }

三種寫法返回的結果值均為:20%——

.footer {  width: 20%;  height: 20%;  margin: 20%; }

B)round($value):四舍五入

• 4舍:小數點后一位"<=4",(0-4)直接去掉小數點及后邊的數;
• 　　5入:小數點后一位">=5",(5-9)整數部分加1并去掉小數點及后邊的數;
• 　　無關正負號;
• 　　無關單位,任何單位都可以進行四舍五入計算;
• 　　括號內可以放數字運算公式,而且公式能成立函數才有作用;
• 注意式子兩邊單位統不統一,若不統一會報錯。如round(2em / 10px)。

SACC

CSS

其他情景模擬:

 1 >> round(12.3) 2 12 3 >> round(12.5) 4 13 5 >> round(1.49999) 6 1 7 >> round(2.0) 8 2 9 >> round(20%)10 20%11 >> round(2.2%)12 2%13 >> round(3.9em)14 4em15 >> round(2.3px)16 2px17 >> round(2px / 3px)18 119 >> round(1px / 3px)20 021 >> round(3px / 2em)22 2px/em【這個寫法會報錯】

【注】最后一個寫法中,兩個不同的單位來計算是不行的,但是其中一個有單位另一個沒單位倒是可以的,

其實根本原因是,他里邊的式子能計算,外部的函數就可以計算。里邊式子都是錯的,結果不是一個$value,自然函數不能用。

C)ceil($value):向上取整

• 數值為正,整數部分加一并去掉小數點及后邊的數;1.4—>2
• 　　數值為負,整數部分不變并去掉小數點及后邊的數。-1.4—>-1【相當于floor了】
• 　　這里做運算,單位就不能用了,

示例:

 1 >> ceil(2.0) 2 2 3 >> ceil(2.1) 4 3 5 >> ceil(2.6) 6 3 7 >> ceil(2.3%) 8 3% 9 >> ceil(2.3px)10 3px11 >> ceil(2.5px)12 3px13 >> ceil(2 / 8)  // 注意這里,做除法時,要把單位都去掉,要不都加單位、要不都不加單位。但是只有其中一個有單位就不能編譯 。14 115 >> ceil(2 * 8px)  //乘法中, 這個單位可以有一個,可以兩個都沒有單位,但是兩個都有就不行,16 16 

D)floor($value):向下取整

• 就是直接去掉小數點及以后的數而已。

 1 >> floor(2.1) 2 2 3 >> floor(2.5) 4 2 5 >> floor(3.5%) 6 3% 7 >> floor(10.2px) 8 10px 9 >> floor(10.8em)10 10em 11 >> floor(45px / 10px)12 413 >> floor(3px * 1)14 3em

總是總結一句話:函數內部可以用數字運算,但是運算公式要尊重加減乘除公式的運算法則。

比如乘法不能兩邊都有單位,除法不能只有一個有單位。

E)abs($value):取絕對值

• 負數變正的;
• 　　正數還是正。

 1 >> abs(10) 2 10 3 >> abs(-10) 4 10 5 >> abs(-10px) 6 10px 7 >> abs(-2em) 8 2em 9 >> abs(-.5%)10 0.5%11 >> abs(-1px / 2px)12 0.513 >> abs(-3 / 2)14 1.5

F)min($number...):在一堆數中找出最小值

• 　　這個函數可以設置任意多個參數,多個參數之間用逗號隔開。
• 　　若小數點的是最小的,則保留帶小數點的數,原樣返回。
• 　　多個參數可以帶單位,有幾個帶的有幾個不帶的。
• 　　但是在 min() 函數中同時出現兩種不同類型的單位,不然會報錯。

2 >> min(1,2,1%,3,300%)3 1%4 >> min(1px,2,3px)5 1px6 >> min(1em,2em,6em)7 1em

G)max($number...):在一堆數中找出最大值

• 這一堆數用逗號隔開。
• 　　若小數點的是最大的,則保留帶小數點的數,原樣返回。
• 　 ???多個參數可以帶單位,有幾個帶的有幾個不帶的。
• 　　但是在 min() 函數中同時出現兩種不同類型的單位,不然會報錯。

1 >> max(1,5)2 53 >> max(1px,5px)4 5px

H)random():取0-1之間的隨機數

• 獲取的是0-1之間的數,集合(0,1)。

 1 >> random() 2 0.03886 3 >> random() 4 0.66527 5 >> random() 6 0.8125 7 >> random() 8 0.26839 9 >> random()10 0.85063

　　所有函數做個范例

3.列表函數

length();nth();join();append();zip();index();Introspection();{

unit();　　　　　　　　unitless();　　　　　　　　comparable();

}Miscellaneous();

A) length($list):返回一個列表的長度值

• 列表中的數值之間用空格隔開,千萬別用逗號會報錯;
• 　　用小括號括起來的幾個值算成一個值;
• 　　同一個列表里邊不同值可以是不同類型、不同單位的值

1 >> length(10px)2 13 >> length(10px 20px (border 1px solid) 2em)4 45 >> length(border 1px solid)6 3

B) nth($list, $n):找出一個列表中指定的某個標簽值

• 列表中值得編號從1開始:1 是指列表中的第一個標簽值,2 是指列給中的第二個標簽值,依此類推。
• 　　在 nth($list,$n) 函數中的?$n 必須是大于 0 的整數!若為0會報錯:如 SyntaxError: List index 0 must be a non-zero integer for `nth'

1 >> nth(10px 20px 30px,1)2 10px3 >> nth((Helvetica,Arial,sans-serif),2)4 "Arial"5 >> nth((1px solid red) border-top green,1)6 (1px "solid" #ff0000)

C) join($list1,$list2,[$separator]):將兩個列連起來變成一個

• 功能:鏈接兩個列表為1個列表,不同列表之間用逗號隔開

1 >> join(10px 20px, 30px 40px)2 (10px 20px 30px 40px)

• 　注意:一次只能鏈接兩個,若待鏈接的列表多于兩個,則兩個之后的就連不進來了

如下,鏈接了三個列表,第三個就沒進來

1 >>join(blue,(red orange),space);//三個列表2 (blue red orange)

• 　　想要鏈接多個值列表,使用多個join

示例:看height處的寫法,有多個列表值時,用join將之兩兩合并;

 1 p{ 2     width: join(blue,(red orange),space); 3     height: join(blue,join((red orange),space)); 4 } 5 >>結果 6 p { 7  8   width: blue red orange; 9 10   height: blue red orange space; }

• 　　若需要鏈接的列表中,項是顏色值,不管原列表中值是什么格式,連接后都會轉變成#號加16進制的RGB寫法【這個也不缺定,在慕課的在線編輯器上,還是會和原列表中的值一模一樣的額寫法,比如blue并沒有改變成rgb,而還是英語單詞】

1 >> join((blue,red),(#abc,#def))2 (#0000ff, #ff0000, #aabbcc, #ddeeff)3 >> join((blue,red),(#abc #def))4 (#0000ff, #ff0000, #aabbcc, #ddeeff)

• 　　separator參數可以設置鏈接后的列表中各個列表項值之間用什么分隔。
  • auto是空格(? )分隔
  • comma是逗號(,)分隔
  • space是使用空格(? )分隔
• 　　鏈接后的列表分隔準則:
  • 若不指定separator,
    • 當待合并的第一個列表中只有一個列表項,合并后的列表項目中每個列表項目之間使用的分隔符號會根據第二個列表項中使用的來決定。若第二個列表項中用的逗號(,)分隔,合并后的列表項就會是用逗號分割的;如果第二項用的空格,則最后也用空格
    • 當第一個列表中值大于兩個,且每個值之間用的是空格分隔,那么合并后的列表中的每個列表項之間也是用空格分隔,也就是說按照第一個列表中的分隔方式倆決定　　
    • 若兩個待合并的列表項中的值均小于1時,將會以空格分隔。
  • 由于繁瑣,建議特別指定separator的值

1 >> join((blue green),(red,orange),comma)2 (#0000ff, #008000, #ff0000, #ffa500)3 >> join((blue green),(red,orange),space)4 (#0000ff #008000 #ff0000 #ffa500)5 >> join((blue, green),(red,orange),comma)6 (#0000ff, #008000, #ff0000, #ffa500)7 >> join((blue, green),(red,orange),space)8 (#0000ff #008000 #ff0000 #ffa500)

D) append($list, $val, [$separator]):將某個值放在列表的最后

• 　　append() 函數是用來將某個值插入到列表中,并且處于最末位。

1 >> append(10px 20px ,30px)2 (10px 20px 30px)3 >> append((10px,20px),30px)4 (10px, 20px, 30px)5 >> append(green,red)6 (#008000 #ff0000)7 >> append(red,(green,blue))8 (#ff0000 (#008000, #0000ff))

• 　　在 append() 函數中,可以顯示的設置 $separator 參數,
  • comma:逗號分隔
  • space : 空格分隔
• 　　如果沒有明確的指定 $separator 參數值,其默認值是 auto。
  • 　　如果列表只有一個列表項時,那么插入進來的值將和原來的值會以空格的方式分隔;
  • 　　如果列表中列表項是以空格分隔列表項,那么插入進來的列表項也將以空格分隔;
  • 　　如果列表中列表項是以逗號分隔列表項,那么插入進來的列表項也將以逗號分隔。

 1 >> append((blue green),red,comma) 2 (#0000ff, #008000, #ff0000) 3 >> append((blue green),red,space) 4 (#0000ff #008000 #ff0000) 5 >> append((blue, green),red,comma) 6 (#0000ff, #008000, #ff0000) 7 >> append((blue, green),red,space) 8 (#0000ff #008000 #ff0000) 9 >> append(blue,red,comma)10 (#0000ff, #ff0000)11 >> append(blue,red,space)12 (#0000ff #ff0000)

E) zip($lists...):將幾個列表合并成一個多維列表

• 　　將多個列表值轉成一個多維的列表

>> zip(1px 2px 3px,solid dashed dotted,green blue red)((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))示例:p{width:zip(solid dashed dotted,1px 2px 3px,green blue red);    width:zip((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))}編譯的cssp {  width: solid 1px green, dashed 2px blue, dotted 3px red;  width: 1px 2px 3px, "solid" "dashed" "dotted", #008000 #0000ff #ff0000; }

• 　　有特殊的組合規則

zip()函數中每個單一列表的值對應的取其相同位置值:

|--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---||------------|---------------|----------------|-------------- ||??? List1??? |????? 1px?????? |????? 2px???? ?? |????? 3px??? ?? ||------------|---------------|----------------|-------------- ||??? List2??? |????? solid? ?? |??? dashed? ? |???? dotted? ? ||------------|---------------|----------------|---------------||??? List3??? |????? green?? |????? blue??????? |????? red?????? ||------------|---------------|-----------------|--------------|zip()函數組合出來就成了:

1px solid green, 2px dashed blue, 3px dotted red

• 　　因為規則,所以:在使用zip()函數時,每個單一的列表個數值必須是相同的——

1 >> zip(1px 2px 3px, solid , green blue red)2 NoMethodError: undefined method `options=' for nil:NilClass3   Use --trace for backtrace.

F) index($list,$value):返回一個值在列表中的位置值

• 　　index() 函數類似于索引一樣,主要讓你找到某個值在列表中所處的位置。
• 　　在 Sass 中,第一個值就是1,第二個值就是 2,依此類推:
• ??沒有空格的時候,還會占位嗎?
• 　　如果指定的值不在列表中(沒有找到相應的值),那么返回的值將是?false;
• 　　返回對應的值在列表中所處的位置。?

 1 >> index(1px solid red, 1px) 2 1 3 >> index(1px solid red, solid) 4 2 5 >> index(1px solid red, red) 6 3 7 >> index(1px solid red,dotted) //列表中沒有找到 dotted 8 false 9 >> index(1px solid red,solid) //列表中找到 solid 值,并且返回他的位置值 210 2

示例代碼

2017-07-03 ?20:07:53?

G) Introspection函數

　　1、type-of($value):返回一個值得類型

 1 p{ 2     width:type-of(false) 3 } 4 >> type-of(100) 5 "number" 6 >> type-of(100px) 7 "number" 8 >> type-of("asdf") 9 "string"10 >> type-of(asdf)11 "string"12 >> type-of(true)13 "bool"14 >> type-of(false)15 "bool"16 >> type-of(#fff)17 "color"18 >> type-of(blue)19 "color"20 >> type-of(1 / 2 = 1)21 "string"22 23 24 返回值:25 number 為數值型。26 string 為字符串型。27 bool 為布爾型。28 color 為顏色型。

　　2、unit($number):返回一個值得單位、獲取一個值所使用的單位,

!!!用于復雜的計算,能根據運算得到一個“多單位組合”的值,不過只允許乘除運算

計算加、減碰到不同單位時,unit函數將會報錯。px、cm、mm運算之外

1 p{2    width: unit(100px);3 4     height: unit(10px / 3em);5 }

1 p {2 3   width: "px";4 5   height: "px/em"; }

看上邊的代碼,高度那里計算出來的是錯誤的沒有什么實際用處的單位值

　　3、unitless($number):判斷一個值 是否帶有單位

　　如果不帶單位返回的值為 true【注意】,帶單位返回的值為 false:

如下代碼:

調用混合宏時,如果用戶沒有給參數值加上單位,程序會自動加入單位。

@mixin adjust-test($x,$y){    @if unitless($x){      $x: 1px * $x;           }  @if unitless($y){  $y: 1px *$y;  }            position: relative;left: $x;top: $y;  }.botton{@include adjust-test(20px,30);}

　　4、comparable($number-1,$number-2):判斷兩個值是否可以做加、減和合并。

如果可以相加,返回的是true,如果不能相加,返回的是false;

p{

width: comparable(2px,1px);

height: comparable(2px,1em);

border: comparable(2rem,1em);

color: comparable(2px,1cm);

line-height: comparable(2px,1cm);

padding: comparable(1px,2mm);

}

特別說明:并不是這種寫法是對的,這樣寫只是為了在線的編輯器可以及時的返回結果,但是代碼這么用是不對的額。

?運算結果:

 1 p { 2  3   width: true; 4  5   height: false; 6  7   border: false; 8  9   color: true;10 11   line-height: true;12 13   padding: true; }

4.Miscellaneous函數——三元條件函數:

if($condition,$if-true,$if-false);

判斷$condition,如果條件成立,則返回$if-true的結果,如果條件不成立,則返回$if-false的結果。

1 p{width:if(true,8em,20em)}2 3 a{height:if(false,8em,20em)}

1 p {3   width: 8em; }7 a {9   height: 20em; }

5.Map——數據地圖,數組

?Sass 的 map 長得與 JSON 極其相似:

json的寫法:

{　　"employees": [　　　　{ "firstName":"John" , "lastName":"Doe" },　　　　{ "firstName":"Anna" , "lastName":"Smith" },　　　　{ "firstName":"Peter" , "lastName":"Jones" }　　]}如map的寫法:

$map: (    $key1: value1,    $key2: value2,    $key3: value3)

首先有一個類似于 Sass 的變量一樣,用個?$ 加上命名空間來聲明?map。

后面緊接是一個小括號 (),將數據以?key:value?的形式賦予,

其中?key 和 value 是成對出現,并且每對之間使用逗號?(,) 分隔,其中最后一組、最后一對后面沒有逗號。

?其中,鍵key是用來查找相關聯的值value。使用map可以很容易的收集鍵的值和動態的插入新的鍵值對。

a) map集合

原來的時候,在sass中聲明定義變量的方法如下:

$default-color: #fff !default;

$primary-color: #22e2e2 !default;

這種的,可以用map來管理起來,就像用json把js中的多個變量值對集合起來一樣。

$color:(//這里用小括號,不是大括號,區別于json

　　default:?#fff,//用逗號隔開每個鍵值對。鍵和值之間用冒號

　　primary: #22e2e2 ??//最后一組鍵值對不用逗號

)

這樣組合的好處是:

日后可以隨意的動態の增、改、刪、查、

b) 二維、多維map

就像數組里有二維數組、json里有二維json一樣,map里也有"二維數據、多維數據"來嵌套

一個key值可以做另一組map的名字

$map: (

　　$key1 : $value1,

　　$key2:?(//同樣用小括號包裹

　　　　$key-1 :$value-1,

　　　　$key-2 :$value-2

),//map中的map,除了用括號包裹,也用逗號分隔,反正就記住,內部沒有分號、沒有大括號

　　$key3 :$value3

);//最后用分號,是和其他的sass代碼切割用的。

這種嵌套的寫法,可以用來寫換膚項目的代碼。

“可能每一套的皮膚對應的代碼挺多的,那么使用此功能來管理顏色的變量就非常的有條理性,便于維護和管理”

?c) map應用——換膚項目案例

使用方法如下:(注:是個二維map)

二維嵌套map

?d) map調用

就像json會有for in來遍歷一樣,map的數據組也可以用sass的@each in 來遍歷來調用:

@each $keys,$values ?in $theme-color{

　　.theme-color-#{$keys}{

　　　　@each $key,$value in $values{

　　　　　　#{$key}: #{$value}

　　　　}

　　}

}

示例css代碼

e)最后注意:

鍵和值之間的冒號千萬不要省略,有些老版本的sass中有這么寫的,但是現在不能這么寫了,不然,死都不知道怎么死;

我以上的代碼中,為了突出重點、為了代碼名了,多出用了中文的符號來強調,但是復制到自己的文件中,一定要改成英文半角狀態的符號才不會報錯。

有時候中文的空格都會報錯。

2017-07-04 ?14:41:18

?6.Maps函數

• map-get($map,$key);根據給定的key值,返回?map 中相關的值
• map-merge($map1,$map2);將兩個 map 合并成一個新的 map。
• map-remove($map,$key);從 map 中刪除一個 key,返回一個新 map。
• map-keys($map);返回 map 中所有的 key。
• map-values($map);返回 map 中所有的 value。
• map-has-key($map,$key);根據給定的 key 值判斷 map 是否有對應的 value 值,如果有返回 true,否則返回 false。
• keywords($args);返回一個函數的參數,這個參數可以動態的設置 key 和 value。

A).map-get($map,$key)

根據 $key 參數,返回 $key 在 $map 中對應的 value 值。

如果 $key 不存在 $map中,將返回 null 值。

兩個參數:

• $map:定義好的 map。
• $key:需要遍歷的 key。

示例:

map-get()用法

編譯的css

特別注意:

我們來看另一種情況,假設 $social-colors 這個 map 沒有 $weibo 這個 key:

.btn-weibo{  font-size: 12px;  color: map-get($social-colors,weibo);}

此時編譯出來的是CSS:

.btn-weibo {  font-size: 12px;}

如果map沒有$key對應的$value值,他不會把css編譯出來(其實他返回一個null,但在編譯出來的 CSS 中,你只知道他沒有編譯出樣式,而且在命令終端編譯時,也沒有任何錯誤或者警告信息。體驗不強,也不好排錯。其實如果我們自定義一個函數,另外加個判斷,那就截然不同。)

如果使用 map-has-key($map,$key) 函數就可以改變這一狀態。如下:

B).map-has-key($map,$key)

函數將返回一個布爾值。當 $map 中有這個 $key,則函數返回 true,否則返回 false。

判斷的原理和結構代碼如下:

首先為了需要,我先貯備一個map集合——

1 $map:(//map與括號之間有冒號2     facebook : #111,3     twiter : #222,4     qq : #333,5     weixin: #4446 );

然后判斷,如果map中有我們需要的key,且其有對應值,則執行代碼利用map-get調用map中的值,否則彈出報錯

結構:

 1 @if map-has-key($map,$key){ 2  3 　　//執行條件成立的代碼,如讓某個選擇器調用代碼等。 4  5 }@else{ 6  7 　　//執行條件不成立的代碼,手動報錯錯誤 8  9 　　@warn "出錯了。";10 11 }

分析:

@if map-has-key($map,qq){//如果在map中有qq這個鍵,且其有對應的值

　　p{

　　　　color: map-get($map,qq);//在map中取出qq對應的值,給了p的color

　　} @else{

　　　　#warn "no color found";

　　}　　

}

總覺得這樣寫是傻傻的,總不可能每獲取一個 key 都寫一個 @if 語句吧。其實不用這么復雜,我們可以

封裝——自定義一個函數,比如 colors():

 1 @function colors($color){ 2  3 　　@if not map-has-key($mapName,$color){ 4  5 　　　　@warn "Error prompt" 6  7  8 　　} 9 10 　　@return map-get($mapName,$color);11 12 }13 14 p{15 16 　　color : colors($keyName)17 18 }

代碼解釋:

行1:定義一個名字為colors的函數;

　　里邊一個形參變量,名字隨便起

3:@if not,注意這里是反向判斷,如果沒有的話才會執行后邊大括號內部的代碼;

　　mpa-has-key的名字別寫錯;

　　$mapName就是上邊你定義的map的名字,$color:對應聲明函數的時候,括號里的形參

5:@warn,總是a、r寫反,注意單詞的寫法;

　　錯誤提示信息隨意發揮

10: 函數返回值:是在@if not不成立的時候,也就是map中鍵有對應值得時候;

　　利用map-get,在map中獲取需要的key值;

　　$mapName就是上邊的map的名字、$color就是和上邊的形參一樣即可

14:需要獲取相關信息的選擇器開始調用,

16:調用的方法與js無異,直接函數名調用,里邊放的是具體的鍵值的名字,是你需要的鍵的名字。

實例如下:

$map:(//map與括號之間有冒號    facebook : #111,    twiter : #222,    qq : #333,    weixin: #444);@function colors($color){    @if not map-has-key($map , $color){//map-has-key的函數名字別寫錯了        @warn "錯誤了";    }        @return map-get($map, $color);    }p{    color: colors(qq);}

相比原來的判斷語句來說,這次代碼的重用率更高了。

C).map-keys($map)

?函數將會返回 $map 中的所有?key。這些值賦予給一個變量,那他就是一個列表。如:

map-keys($social-colors);

其返回的值為:

"dribble","facebook","github","google","twitter"

換句話說:

$list: map-keys($social-colors);

相當于:

$list:"dribble","facebook","github","google","twitter";

可以配合 Sass 的 list 做很多事情。

上面的示例,可以做通過 map-keys($map) 來做一個修改:

1 @function colors($color){2     $names: map-keys($social-colors);3     @if not index($names,$color){4         @warn "Waring: `#{$color} is not a valid color name.`";5     }6     @return map-get($social-colors,$color);7 }

上面代碼中最不同之處,我們使 用map-key s將 $social-colors 這個 map 的所有 key 取出,并賦予給一個名 為 $names 的列表。然后通過 index($names,$color) 返回 $color 在 $names 位置,如果這個位置不存在,將返回提示信息,如果存在將返回正確的值。

實例:

示例代碼

css:

p {  z-index: 1; }

也可以通過 @each 或者 @for 遍歷出所有值:

@each方法

@each $name in map-keys($social-colors){    .btn-#{$name}{        color: colors($name);    }}

實例及css

SCSS-@each in 遍歷 map-keys($map)

@for方法

@for $i from 1 through length(map-keys($social-colors)){    .btn-#{nth(map-keys($social-colors),$i)} {        color: colors(nth(map-keys($social-colors),$i));    }}

實例及css

SCSS-@for遍歷map-keys($map)

雖然使用的方法不一樣,但最終得到的 CSS 是一樣的:

D).map-values($map)

?map-values($map) 函數類似于 map-keys($map) 功能

不同的是 map-values($map )獲取的是 $map 的所有 value 值,可以說也將是一個列表。

而且,map-values($map) 中如果有相同的 value 也將會全部獲取出來。

如前面的示例,使用:

map-values($social-colors)

將會返回:

#ea4c89,#3b5998,#171515,#db4437,#55acee

值與值之前同樣用逗號分隔。

E).map-merge($map1,$map2)

map-merge($map1,$map2) 函數是將 $map1 和 $map2 合并,然后得到一個新的 $map。

如果你要快速將新的值插入到 $map 中的話,這種方法是最佳方法。假設我們有兩個 $map:

兩個$map集合

合并成一個的方法

$newmap : map-merge($color,$typo);

將會生成一個新的map:

新的$newmap

這樣你就可以借助 map-get( ) 等函數做其他事情了。

不過有一點需要注意,如果 $map1 和 $map2 中有相同的 $key 名,那么將 $map2 中的 $key 會取代 $map1 中的:

?比如,把合并的map放到一個標簽中:利用@each方法遍歷:

 1 $p1( 2   text: #f36, 3   link: #f35, 4   border: #384           5 ) 6 $p2( 7   width: 300px, 8   height: 100px, 9   z-index: 3      10 )11 $newmap: map-merge($p1,$p2);12 p{13   @each $x,$y in $newmap{14      #{$x}: #{$y};      15     }  16 }

編譯的css

F).map-remove($map,$key)

map-remove($map,$key) 函數是用來刪除當前 $map 中的某一個 $key,從而得到一個新的 map。其返回的值還是一個 map。

他并不能直接從一個 map 中刪除另一個 map,僅能通過刪除 map 中的某個 key 得到新 map。

 1 $map:( 2 a:1, 3 b:2, 4 c:3, 5 d:4 6 );//少一個分號都會報錯 7 $newmap:map-remove($map,f);// 刪除的key并不存在的時候,那么返回的新map和之前的舊map是一樣的。 8 p{ 9     @each $x,$y in $newmap{10         #{$x}:#{$y};11     }12 }13 14 $newmap2:map-remove($map,d);//刪除map的某個值,返回一個新的map15 .p2{16     17     @each $x,$y in $newmap2{18         #{$x}:#{$y};19     }20 }

G).keywords($args)

?定義上說:這個函數可以動態的創建map函數,但是我自己思考,若要動態的添加key和value值,在map函數中也是可以的額。

但是他的一個特色用法是:可以通過混合宏或函數的參數動態創建map。

函數傳的參數也是成對的出現的。函數的參數形式就相當于一個map里邊的鍵值對的形式,區別是:map里邊的key沒有$符號,但是參數里的有

形參$args變成key(key會自動去掉$符號),$args對應的值就是value。

比如示例函數:

 1 @mixin map($args){ 2  3 　　@debug keywords($args); 4  5 } 6  7 @include map( 8  9 　　$a: 1,10 11 　　$b: 2,12 13 　　$c: 314 15 )

這樣,在命令終端,就會得到一個@debug的信息:

./8460/F9mR/index.scss:23 DEBUG: (a: 1, b: 2, c: 3)

你也會發現,debug出來的key值沒有帶著$符號了

我的理解是:在debug前,有$符號的key是參數,他就是一個變量,所以有

debug出來后,或者說keywords動態的一個一個把他們轉變成map鍵值對后,他們就成了map里的KEY,也就不需要符號了。

實際用途:

批量的給小圖標改顏色(多皮膚設置也可以)

 1 @mixin bgColors($args...){//表示傳入多個參數,用了“...”符號 2  3 　　$list: keywords($args); 4  5 　　@each $x,$y in $list{//用一個each,循環變量colors列表里的鍵值對 6  7 　　　　.bg_#{$x}{ 8  9 　　　　　　background-color:#{$y};10 　　　　}11 　　}12 13 }14 15 @include bgColors(//調用函數,并傳入需要設置值得參數16 17 　　$weibo: #f00,18 19 　　$QQ : #0f0,20 21 　　$weixin: #00f,22 23 　　$github: #00024 25 )

最后編譯后的style:

 1 .bg_weibo { 2  3   background-color: #f00; } 4  5 .bg_QQ { 6  7   background-color: #0f0; } 8  9 .bg_weixin {10 11   background-color: #00f; }12 13 .bg_github {14 15   background-color: #000; }

日后,如果需要,還可以多次插入,也就是前文提到的動態的創建。

7.顏色函數

　　1).RGB()函數

A).rgb($red,$green,$blue):根據紅、綠、藍三個值創建一個顏色,

　　輸入的是三個0-255之間的數字值,分別是紅綠藍三個顏色的值,然后得到一個16進制的顏色值,比如#293849

B).rgba($red,$green,$blue,$alpha):根據紅、綠、藍和透明度值創建一個顏色

　　函數主要用來將一個顏色根據透明度轉換成rgba顏色。

語法格式:

C).rgba($red,$green,$blue,$alpha):將一個rgba顏色轉譯出來,和未轉譯的值一樣。

D).rgba($color,$alpha):一個Hex(16進制)顏色值轉換成rgba顏色!!這種寫法在css中不被允許,但是在sass中卻可以這么寫。

語法:

在括號是函數的參數,第一個參數是需要轉換的顏色,他可以是任何顏色的表達方式,也可以是一個顏色變量;第二個參數是顏色的透明度,其值是 0~1 之間。

例子,假設在變量中定義了一個基本的變量:

1 $color: #f36;2 $bgColor: orange;3 $borderColor:green;

調用定義的變量

同時給他們加上 .5 的透明度:

1 //SCSS2 .rgba {3     color: rgba($color,.5);4     background: rgba($bgColor,.5);5     border-color: rgba($borderColor,.5);6 }

或者直接把顏色值替換掉變量的寫法:

1 //SCSS2 .rgba {3     color: rgba(#f36,.5);4     background: rgba(orange,.5);5     border-color: rgba(green,.5);6 }

1 .rgba {2   color: rgba(255, 51, 102, 0.5);3   background: rgba(255, 165, 0, 0.5);4   border-color: rgba(0, 128, 0, 0.5);5 }

E).red($color):從一個顏色中獲取其紅色值F).green($color):從一個顏色中獲取其綠色值G).blue($color):從一個顏色中獲取其藍色值

以上三個函數用法一致,挑一個做案例:

Red()函數:

在命令終端要先輸入sass -i 命令

假設有一個 #f36 的顏色,如果你想得到 #f36 中的 red 值是多少,這個時候使用 red() 函數就能很簡單獲取。

1 >> red(#f36)2 255

實際用法:

當顏色的紅色值大于50使用白色,當紅色值小于50使用黑色

 1 $color: #f36; 2  3 .body { 4     @if red($color) > 50 { 5         color: #fff; 6     } 7     @else if red($color) < 50 { 8         color:#000; 9     }10 }

1 .body {2 3   color: #fff; }

H).mix($color-1,$color-2,[#weight]):把兩種顏色按照一定的比例混合在一起,

$color-1、$color-2:指的是你需要合并的顏色,顏色可以是任何表達式,也可以是顏色變量,還可以是顏色函數如rgba();

$weight是權重值,也就是混合比例,表示第一種顏色的比例值——默認是50%。取值范圍0-1之間

他是每個rgb的百分比來衡量,(透明度也會有一定的權重)

若指定比例是25%:則表示第一個顏色所占的比例是25%,第二個顏色所占的比例是75%。

使用方法入下:

1 mix(#f00, #00f) => #7f007f2 mix(#f00, #00f, 25%) => #3f00bf3 mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)

案例:$color-1與$color-2用變量來表示:

SCSS

CSS

　　2).HSL()函數

A).hsl($hue,$saturation,$lightness)　　用色相、飽和度、亮度值創建一個顏色

 p{    color: hsla(200,30%,60%,.8)}

1  hsl(200,30%,60%) >>#7aa3b82 //通過h200,s30%,l60%創建一個顏色#7aa3b8

B).hsla($hue,$saturation,$lightness,$alpha)　　用色、飽、亮、透明度創建一個顏色

 hsla(200,30%,60%,.8)>>rgba(122, 163, 184, 0.8)//通過h200,s30%,l60%,a80%創建一個顏色rgba(122, 163, 184, 0.8)

C).hue($color)從一個顏色中獲取色相(hue)值

hue(#7ab)>> 195deg//得到#7ab顏色的色相值195deg

D).saturation($color)從一個顏色中獲取飽和度(saturation)值

1  saturation(#7ab)>>33.33333%2 //得到#7ab顏色的飽和度值33.33333%

E).lightness($color)從一個顏色中獲取亮度(lightness)值

1 lightness(#7ab)>> 60%2 //得到#7ab顏色的亮度值60%

F).adjust-hue($color,$degrees)

這個是通過調整顏色的色相換算一個新顏色。

他需要一個顏色和色相度數值。通常這個度數值是在 -360deg 至 360deg 之間,當然了可以是百分數.

按照美術的色彩輪盤來推測:如果度數值設置為360%/-360%,那么結果都將是$color顏色本身。

1 $bgcolor: #f46;2 3 .btn{4     background-color: $bgcolor;5     border-color: adjust-hue($bgcolor, 360%);6 }

css:

1 .btn {2 3   background-color: #f46;4 5   border-color: #ff4466; }

這里有一個很有意思的地方,在 HSL 顏色表達方式上,色相是從 -360 和 360 之間,負值逆時針轉,正值順時針轉。在這個實例中,原色的色相值約 356deg,加上 30deg 后,新顏色變成了 386deg,但我們的色盤中并沒有比 360deg 更大的值,此時新顏色的值也并不會是386deg,那將怎么辦呢?

其實很簡單,當值大于 360deg時,表示色盤轉完了一圈,繼續順時針轉余下的值(這里是 26deg),那么這個繼續轉的值就是新顏色的色相值。反之,得到的負數值也是一樣的道理。

G).lighten($color,$amount)提亮亮度,讓顏色變亮得到新顏色

1  lighten(#f36,50%)>>#ffffff2  //把#f36顏色亮度提高50% 十六進制即為 #ffffff

這個其實結果是white,編譯成英文的顏色單詞

實例:

首先定義一個顏色變量:

1 $baseColor: #ad141e;

使用 lighten() 和 darken() 函數來修改 10% 的亮度值:

//SCSS

1 .lighten {2     background: lighten($baseColor,10%);3 }4 .darken{5     background: darken($baseColor,10%);6 }

編譯出來的 css 代碼:

//CSS

1 .lighten {2   background: #db1926;3 }4 5 .darken {6   background: #7f0f16;7 }

H).darken($color,$amount)降低亮度,讓顏色變暗得到新顏色

1 darken(#f36,50%)>> #33000d2  //把#f36顏色亮度降低50%#33000d

lighten() 和 darken() 函數只是在原始顏色的基礎上對亮度值進行運算操作,但是生成出來的新顏色在色相和飽和度會有略微的變化,

不管什么顏色當其亮度值 趨近于0時,顏色會越來越暗,直到變成了黑色;反之,當其亮度值趨近于 100% 時,顏色會越來越亮,直到變成了白色。

但當使用 lighten() 和 darken() 函數對一個顏色的亮度值計算時,會碰到兩個極端,lighten() 函數會讓新顏色的亮度值超過 100%,而 darken() 函數會讓新顏色的亮度值低于 0 變成負數。

可實際上任何顏色的亮度值都在 0~100% 之間,如此一來,Sass 的 lighten() 和 darken() 函數又將會如何處理呢?

上面的例子說明了一切問題。當顏色的亮度值接近或大于 100%,顏色會變成白色;反之顏色的亮度值接近或小于 0 時,顏色會變成黑色。

I).saturate($color,$amount)增加顏色飽和度,返回新顏色

1 saturate(#f36,50%) >> #ff33662 //把#f36顏色飽和度提高50%#ff3366

J).desaturate($color,$amount)降低顏色飽和度,返回新顏色

1  desaturate(#f36,50%)>>#cc667f2  //把#f36顏色飽和度降低50%#cc667f

saturate()、desaturate()這兩個函數是通過改變顏色的飽和度來得到一個新的顏色

//SCSS

1 $baseColor: #ad141e;2 .saturate {3   background: saturate($baseColor,30%); //在原色飽和度基礎上增加飽和度4 }5 .desaturate {6   background: desaturate($baseColor,30%);//在原色飽和度基礎上減少飽和度7 }

編譯出來的 css 代碼:

//CSS

1 .saturate {2   background: #c1000d;3 }4 5 .desaturate {6   background: #903137;7 }

用 saturation() 函數在終端中進行計算一下

>> saturation(#ad141e) //原色的飽和度79.27461%>> saturation(#c1000d)  //在原色飽和度基礎上增加30%,超過100%時按100%計算100%>> saturation(#903137) //在原色飽和度基礎上減少30%,小于0時按0計算49.2228%

K).grayscale($color)將顏色變灰色,即將顏色的飽和度值直接調至 0% ?=== desaturate($color:100%);

grayscale() 函數處理過的顏色,其最大的特征就是顏色的飽和度為 0。

1 grayscale(#f36)>> #9999992  //把#f36顏色變成灰色#999999

這個函數能將彩色顏色轉換成不同程度的灰色。

//SCSS

1 $baseColor: #ad141e;2 .grayscale {3   background: grayscale($baseColor);4 }5 .desaturate {6   background: desaturate($baseColor,100%);7 }

編譯出來的 css 代碼:

//CSS

1 .grayscale {2   background: #616161;3 }4 .desaturate {5   background: #616161;6 }

L).complement($color)返回一個補充色,相當于adjust-hue($color,180deg)

1  complement(#f36)>>#33ffcc

M).invert($color)返回反相色,紅綠藍色值倒過來,而透明度不變。

1  invert(#f36)>>#00cc99

如圖,把紅色變成了綠色,也就是常說的對比色。

　　?3).Opacity函數

A).alpha($color)/opacity($color):獲取顏色的透明度值

與 red(),green() 等函數很類似。這個函數的主要功能是用來獲取一個顏色的透明度值。值在0-1之間

如果顏色沒有特別指定透明度,那么這兩個函數得到的值都會是 1:

1 >> alpha(red)2 13 >> alpha(rgba(red,.8))4 0.85 >> opacity(red)6 17 >> opacity(rgba(red,.8))8 0.8

$color也可以用變量代替

 1 $color: blue; 2 $color2:rgba(blue,.5); 3 $color3:blue; 4 $color4:rgba(blue,.5); 5 p{ 6     color: alpha($color); 7     color: alpha($color2); 8     color: opacity($color3); 9     color: opacity($color4);10 }

1 p {2   color: 1;3   color: 0.5;4   color: 1;5   color: 0.5; }

B).rgba($color,$alpha):改變顏色的透明度值

同前面介紹 RGB 函數中,rgba() 函數

其可以創建一個顏色,同時還可以對顏色修改其透明度。

其可以接受兩個參數,第一個參數為顏色,第二個參數是你需要設置的顏色透明值。

 1 >> rgba(red,.5) 2 rgba(255, 0, 0, 0.5) 3 >> rgba(#dedede,.5) 4 rgba(222, 222, 222, 0.5) 5 >> rgba(rgb(34,45,44),.5) 6 rgba(34, 45, 44, 0.5) 7 >> rgba(rgba(33,45,123,.2),.5) 8 rgba(33, 45, 123, 0.5) 9 >> rgba(hsl(33,7%,21%),.5)10 rgba(57, 54, 50, 0.5)11 >> rgba(hsla(33,7%,21%,.9),.5)12 rgba(57, 54, 50, 0.5)

C).opacify($color,$amount)/fade-in($color,$amount):使顏色更不透明;

兩個函數會讓透明值做加法運算,(所以最后透明度的值,要看原顏色值的透明度加上這個函數的透明度參數值之后的結果)

兩個參數,第一個參數是原始顏色,第二個參數是你需要增加的透明度值

其取值范圍主要是在 0~1 之間。

當透明度值增加到大于 1 時,會以 1 計算,表示顏色不具有任何透明度。

幾種不同的寫法如下($color值這里,可以傳入不同的顏色值rgb、hsl、16進制等)

 1 >> opacify(rgba(22,34,235,.6),.2) 2 rgba(22, 34, 235, 0.8) 3 >> opacify(rgba(22,34,235,.6),.5) 4 #1622eb 5 >> opacify(hsla(22,34%,23%,.6),.15) 6 rgba(79, 53, 39, 0.75) 7 >> opacify(hsla(22,34%,23%,.6),.415) 8 #4f3527 9 >> opacify(red,.15)10 #ff000011 >> opacify(#89adde,.15)12 #89adde13 >> fade-in(rgba(23,34,34,.5),.15)14 rgba(23, 34, 34, 0.65)15 >> fade-in(rgba(23,34,34,.5),.615)16 #172222

其中?fade-in( ) 函數又名 fade_in()?函數。其所起作用等效。

D).transparentize($color,$amount)/fade-out($color,$amount):使顏色更加透明

讓顏色更加的透明。這兩個函數會讓透明值做減法運算,(所以最后透明度的值,要看原顏色值的透明度減去這個函數的透明度參數值之后的結果)

當計算出來的結果小于 0 時會以 0 計算,表示全透明

 1 >> transparentize(red,.5) 2 rgba(255, 0, 0, 0.5) 3 >> transparentize(#fde,.9) 4 rgba(255, 221, 238, 0.1) 5 >> transparentize(rgba(98,233,124,.3),.11) 6 rgba(98, 233, 124, 0.19) 7 >> transparentize(rgba(98,233,124,.3),.51) 8 rgba(98, 233, 124, 0) 9 >> fade-out(red,.9)10 rgba(255, 0, 0, 0.1)11 >> fade-out(hsla(98,6%,23%,.5),.1)12 rgba(58, 62, 55, 0.4)13 >> fade-out(hsla(98,6%,23%,.5),.6)14 rgba(58, 62, 55, 0)

?三、@規則

Sass支持css3的所有@則

1.@import2.@media3.@extend4.@at-root5.@debug6.@warn7.@error

　　1.@import

1). ?css中的@import規則延展

A).兩大作用:

　　a.引入外部css文件;(注意與link的區別:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html)

　　b.根據媒體查詢,判斷屏幕分辨率以視情況的引入對應的css文件

　　c.在css中的@import語法:http://caibaojian.com/css3/rules/@import.htm

@import?<url> <media_query_list>

<media_query_list>:[<media_query>[','?<media_query>]*]?

<media_query>:[only | not]??<media_type>?[and?<expression>]* |?<expression>?[and?<expression>]*

<expression>:'('<media_feature>[:<value>]?')'

<url>:使用絕對或相對地址指定導入的外部樣式表文件?？梢允莡rl(url)或者直接是一個url

<media_query_list>:指定媒體類型和查詢條件。

B).指定導入的外部樣式表及目標媒體。

• 該規則必須在樣式表頭部最先聲明。并且其后的分號是必需的,如果省略了此分號,外部樣式表將無法正確導入,并會生成錯誤信息。
• IE使用@import無法引入超過35條的樣式表。
• 當使用url(url)的方式時,包住路徑的引號可有可無;當直接使用url時,包住路徑的引號必須保留。

1 @import url("global.css");2 @import url(global.css);3 @import "global.css";

C).兼容性:

1. IE7及更早瀏覽器不支持@import指定媒體類型和媒體查詢。
2. IE8不支持@import指定媒體查詢。

D)html中的使用示例:

1 <html lang="zh-cn">2 <head>3 <meta charset="utf-8" />4 <title>CSS @import詳解-CSS教程</title>5 <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />6 <style>7 @import url("style.css") screen, print;8 </style>9 </head>

@import url(style.css) 和@import url("style.css")是最優的選擇,兼容的瀏覽器最多。從字節優化的角度來看@import url(style.css)最值得推薦

2). ?sass中的@import

　　a.可以用來引入SCSS和Sass文件

　　所有引入的 SCSS 和 Sass 文件都會被合并并輸出一個單一的 CSS 文件。

　　另外,被導入的文件中所定義的變量或 mixins 都可以在主文件中使用

　　Sass會在當前目錄下尋找其他Sass文件

但是,有些情況下,@import會被誤導并編譯成css代碼

　　b.會被編譯成css代碼的情況:

• 如果文件的擴展名是 .css。
• 如果文件名以 http:// 開頭。
• 如果文件名是 url()。
• 如果 @import 包含了任何媒體查詢(media queries)。

比如:

View Code

1 //將被編譯為:2 @import "foo.css";3 @import "foo" screen;4 @import "http://foo.com/bar";5 @import url(foo);

如果沒有出現上述情況,就可以用來做“引入”功能

　　c.@import根據文件名引入

• 　　默認,他尋找Sass文件并引入,也可以一個import引入多個文件
• 　　條件是:文件的擴展名是.sass或者.scss;
• 　　如果沒有擴展名,Sass將試著找出具有.sass或.scss擴展名的同名文件并將其引入:

1 @import "foo.scss";

或

1 @import "foo";

都將引入foo.scss文件。

• 　　一個 @import 引入多個文件。例如:

1 @import "rounded-corners", "text-shadow";

將引入 rounded-corners 和 text-shadow 兩個文件。

• 　　文件名前面加一個下劃線,就能避免被編譯

如果你有一個 SCSS 或 Sass 文件需要引入, 但是你又不希望它被編譯為一個 CSS 文件,

這時,你就可以在文件名前面加一個下劃線,就能避免被編譯。 這將告訴 Sass 不要把它編譯成 CSS 文件。

然后,你就可以像往常一樣引入這個文件了,而且還可以省略掉文件名前面的下劃線。

例如,你有一個文件叫做 _colors.scss。 這樣就不會生成 _colors.css 文件了, 而且你還可以這樣做:

1 @import "colors";//不用加下劃線

來引入 _colors.scss 文件。

• 　　注意,在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件

。 例如,?_colors.scss?不能與?colors.scss?并存。

　　d.嵌套@import

雖然大部分時間只需在頂層文件使用 @import 就行了, 但是,你還可以把他們包含在 CSS 規則 和 @media 規則中。

示例:

假設要引入的樣式文件`example.scss`文件中包含這樣的代碼:

1 .example {2   color: red;3 }

然后這樣引用:

1 #main {2   @import "example";3 }

編譯出來的 CSS:

1 #main .example {2   color: red;3 }

　　2.@media

Sass 中的 @media 指令和 CSS 的使用規則一樣的簡單,

但它有另外一個功能,可以嵌套在 CSS 規則中。

嵌套功能有點類似 JS 的冒泡功能一樣,如果在樣式中使用 @media 指令,它將冒泡到外面。

a.嵌套選擇器

1 .sidebar {2   width: 300px;3   @media screen and (orientation: landscape) {4     width: 500px;5   }6 }

編譯出來:

1 .sidebar {2   width: 300px; }3 @media screen and (orientation: landscape) {4    .sidebar {5       width: 500px; } }

b.嵌套@media

1 @media screen {2   .sidebar {3     @media (orientation: landscape) {4       width: 500px;5     }6   }7 }

此時編譯出來:

1 @media screen and (orientation: landscape) {2   .sidebar {3     width: 500px; } }

c. 使用插值#{}來插入變量

1 $media: screen;2 $feature: -webkit-min-device-pixel-ratio;3 $value: 1.5;4 5 @media #{$media} and ($feature: $value) {6   .sidebar {7     width: 500px;8   }9 }

編譯出來的 CSS:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {  .sidebar {    width: 500px; } }

　　3.@extend

@extend用來擴展/繼承?選擇器或占位符

 1 .error { 2   border: 1px #f00; 3   " style="color: rgb(0, 128, 0);">#fdd; 4 } 5 .error.intrusion { 6   background-image: url("/image/hacked.png"); 7 } 8 .seriousError { 9   @extend .error;10   border-width: 3px;11 }

CSS

.seriousError得到的樣式之所以是加了如下三個:

 border: 1px #f00;background-image: url("/image/hacked.png");但是鑒于和.error與.error.intrusion的一致。所以到了css里就都一樣了。

擴展選擇器:

@extend不僅擴展類選擇器,還可以擴展任何選擇器,比如.spechial.cool,a.hover,a.user[href^="http://"],

.hoverlink {  @extend a:hover;}a:hover {  text-decoration: underline;}

編譯出來的結果

再來看一個類名復雜點的:

1 .hoverlink {2   @extend a:hover;3 }4 .comment a.user:hover {5   font-weight: bold;6 }

編譯出來的CSS

1 .comment a.user:hover, .comment .user.hoverlink {2   font-weight: bold; }

這種會突然想不明白為什么結果是這樣,你可以先想一下如果沒用sass這樣的代碼你要怎么寫選擇器。然后慢慢就想通了實在想不通就用實驗說明問題吧

多個擴展:多次使用@extend來調用

?所設某個樣式要繼承多個地方的樣式,那么可以使用 @extend 來繼承多個選擇器或占位符的樣式

 1 .a{ 2     width: 200px; 3 } 4 .b{ 5     height: 300px; 6 } 7 .c{ 8     @extend .a; 9     @extend .b;10 }

1 .a, .c {2   width: 200px; }3 .b, .c {4   height: 300px; }

擴展單一選擇器

1 .c %no{2     width: 1000px;3 }4 .b{5     @extend %no6 }

css

　　4.@at-root

@at-root 從字面上解釋就是跳出根元素。

當你選擇器嵌套多層之后,想讓某個選擇器跳出,此時就可以使用 @at-root。來看一個簡單的示例:(自我感覺多余這一步,要跳出直接重新開一個選擇器不得了。。)

@at-root的SCSS

@at-root的css

　　5.@debug

@debug 在 Sass 中是用來調試的,

當你的在 Sass 的源碼中使用了 @debug 指令之后,Sass 代碼在編譯出錯時,在命令終端會輸出你設置的提示 Bug

//@debug還可以做數學運算

指的是,你在@debug中設置sass的數學運算,最后編譯出錯時,得到的是運算的結果:

1 @debug 10em + 12em;2 3 @debug 54px + 86px;

1 ./8804/F9mR/index.scss:1 DEBUG: 22em2 3 ./8804/F9mR/index.scss:3 DEBUG: 140px

　　6.@warn

@warn 和 @debug 功能類似,用來幫助我們更好的調試 Sass。如:

在sass中,有時候編譯不出來東西他也不報錯,你自己就很難糾錯。那么可以借助@if和@warn來挑錯

 1 @mixin adjust-location($x, $y) { 2   @if unitless($x) {//unitless是內置函數,判斷數值是否有“單位” 3     @warn "Assuming #{$x} to be in pixels"; 4     $x: 1px * $x; 5   } 6   @if unitless($y) { 7     @warn "Assuming #{$y} to be in pixels"; 8     $y: 1px * $y; 9   }10   position: relative; left: $x; top: $y;11 }12 .botton{13     @include adjust-location(20px, 30);14 }

編譯的CSS

　　7.@error

同@warn和@debug,同樣用來提示開發者錯誤的

 1 @mixin error($x){ 2   @if $x < 10 { 3     width: $x * 10px; 4   } @else if $x == 10 { 5     width: $x; 6   } @else { 7     @error "你需要將#{$x}值設置在10以內的數"; 8   } 9 10 }11 12 .test {13   @include error(15);14 }

css

更多sass教程

?W3c教程網:http://www.w3cplus.com/sassguide/syntax.html

github:https://github.com/sass/sass

sass官網:http://sass-lang.com/

慕課網:http://www.imooc.com/learn/436

。。。

sass部分函數及其功能結構圖

右擊“在新標簽頁打開圖片”——來查看大圖。。。