^[1]

四嘀掸、Sass的控制命令

^[2]

4.1 @if

@if是一個(gè)SassScript，它可以根據(jù)條件來處理樣式塊规惰，true返回一個(gè)樣式睬塌，false返回另一個(gè)樣式塊。另外也可與@else if和else一起使用歇万。
假設(shè)要控制一個(gè)元素的隱藏或顯示揩晴，我們就可以定義一個(gè)混合宏，通過@if...@else...來判斷傳進(jìn)參數(shù)的值來控制display的值：

@mixin showOrHide($boolean: reue){
  @if $boolean{
    @debug "$boolean is #{$boolean}";     //@debug是編譯出錯(cuò)后的提示
    display: block;
  }@else{
    @debug "$boolean is #{$boolean}";
    display: none;
  }
}

.show{
  @include showOrHide;
}
.hide{
  @include showOrHide(false);
}

編譯的CSS

.show {
  display: block;
}
.hide {
  display: none;
}

^[3]

4.2 @for循環(huán)（上）

CSS 寫網(wǎng)格系統(tǒng)時(shí)贪磺，.col1~.col12需要一個(gè)一個(gè)寫硫兰，Sass中可以使用@for循環(huán)來寫，有以下兩種方式：

@for $i from <start> through <end>
@for $i from <start> to <end>

• through 表示 包括 end 這個(gè)數(shù)寒锚；
• to 表示 不包括 end 這個(gè)數(shù)劫映。

through.png

to.png

^[4]

4.3 @for循環(huán) （下）

@for 應(yīng)用在網(wǎng)格系統(tǒng)生成各個(gè)格子 class 的代碼：

@for循環(huán)寫網(wǎng)格系統(tǒng)的格子.png

^[5]

4.4 @while循環(huán)

這個(gè)和 @for 指令很相似，只要 @while 后面的條件為 true 就會(huì)執(zhí)行刹前。示例：

$num: 3;
$col-width: 20px;

@while $num > 0{
  .col#{$num}{
    width: $col-width + $num;
  }
  $num: $num - 1;
}

編譯后的CSS：

.col3 {
  width: 23px;
}
.col2 {
  width: 22px;
}
.col1 {
  width: 21px;
}

while.png

^[6]

4.5 @each循環(huán)

@each循環(huán)就是去遍歷一個(gè)列表泳赋，然后從列表中取出對(duì)應(yīng)的值。
@each循環(huán)指令的形式 @each $var in <list>
其中$var就是一個(gè)變量名喇喉，$list是一個(gè)表達(dá)式祖今，返回一個(gè)列表值，變量$var會(huì)在列表做遍歷拣技，并且遍歷出與$var對(duì)應(yīng)的樣式塊千诬。示例：

$list: adam john wynn mason kuroir;   //$list 就是一個(gè)列表

@mixin author-images{
  @each $author in $list{
    .photo-#{$author} {
      background: url("/images/avatars/#{$author}.png") no-repeat;
    } } }

.author-bio{
  @include author-images;
}

編譯后的CSS：

image.png

^[7]

五、Sass的函數(shù)功能-字符串函數(shù)與數(shù)字函數(shù)

已經(jīng)學(xué)過的函數(shù) @extend膏斤、 %placeholder 徐绑、@mixin，Sass還有其他的函數(shù)：

• 字符串函數(shù)
• 數(shù)字函數(shù)
• 列表函數(shù)
• 顏色函數(shù)
• Introspection函數(shù)
• 三元函數(shù)
• 自定義函數(shù)

^[8]

**5.1 字符串函數(shù)

• unquote($string): 刪除字符串中的引號(hào)莫辨；
• quote($string): 給字符串添加引號(hào)傲茄；

5.1.1 unquote()函數(shù)

unquote()函數(shù).png

5.1.2 quote()函數(shù)
quote()主要用來給字符串添加引號(hào)，如果本身帶有引號(hào)磷斧，則會(huì)統(tǒng)一換成雙引號(hào)振愿。示例：

quote()函數(shù).png

image.png

image.png

5.1.3 To-upper-case()函數(shù)與 To-lower-case()函數(shù)
To-upper-case() 函數(shù)將字符串小寫字母轉(zhuǎn)換成大寫字母蔑舞。示例：

To-upper-case() 函數(shù).png

To-lower-case() 函數(shù)

^[9]

5.2 數(shù)字函數(shù)

Sass中的數(shù)字函數(shù)有以下幾個(gè)：

• percentage($value) : 將一個(gè)不帶單位的數(shù)轉(zhuǎn)換成百分比值攻询；
• round($value) : 將數(shù)值四舍五入，轉(zhuǎn)換成一個(gè)最接近的整數(shù)州弟；
• ceil($value) : 將大于自己的小數(shù)轉(zhuǎn)換成下一位整數(shù)钧栖；
• floor($value) : 將一個(gè)數(shù)去除他的小數(shù)部分；
• abs($value) : 返回一個(gè)數(shù)的絕對(duì)值婆翔；
• min($numbers...) : 找出幾個(gè)數(shù)之間的最小值拯杠；
• max($numbers...) : 找出幾個(gè)數(shù)值之間的最大值；
• random() : 獲取隨機(jī)數(shù)啃奴；

5.2.1 percentage($value)函數(shù)
將一個(gè)不帶單位的數(shù)轉(zhuǎn)為百分比值：

percentage($value)

5.2.2 round()函數(shù)
將數(shù)值四舍五入纺腊，轉(zhuǎn)換成一個(gè)最接近的整數(shù)：

round()函數(shù)

5.2.3 ceil()函數(shù)
將一個(gè)大于自身的任何小數(shù)轉(zhuǎn)換成大于本身 1 的整數(shù)畔咧。也就是只做入，不做舍的計(jì)算：

ceil()函數(shù)

5.2.4 floor()函數(shù)
將一個(gè)數(shù)去除其小數(shù)部分揖膜，并且不做任何的進(jìn)位誓沸。也就是只做舍，不做入的計(jì)算：

floor()函數(shù)

5.2.5 abs()函數(shù)
abs() 函數(shù) 會(huì)返回一個(gè)數(shù)的絕對(duì)值：

abs()函數(shù)

5.2.6 min()函數(shù)壹粟、max()函數(shù)

• min()函數(shù)：在多個(gè)數(shù)中找到最小的一個(gè)拜隧，可設(shè)置任意多個(gè)參數(shù)；

• max()函數(shù)：在多個(gè)數(shù)中找到最大的那個(gè)趁仙，可設(shè)置多個(gè)參數(shù)：

  
  
  比較會(huì)忽略非數(shù)字的符號(hào)
  
  

  如果比較函數(shù)中存在單位不一致洪添，會(huì)報(bào)錯(cuò)：

  
  
  單位不一致報(bào)錯(cuò)
  
  注意：min()和max()是兩兩相比，結(jié)果再于第三個(gè)比較雀费，以此類推干奢。

5.2.7 random()函數(shù)
random() 函數(shù)是用來獲取一個(gè)隨機(jī)數(shù)：

隨機(jī)數(shù)

^[10]

六、Sass的函數(shù)功能-列表函數(shù)

主要包括一些對(duì)列表參數(shù)的函數(shù)使用：

• length($list): 返回一個(gè)列表的長(zhǎng)度值盏袄；
• nth($list, $n): 返回一個(gè)列表中指定的某個(gè)標(biāo)簽值忿峻；
• join($list, list2, [$separator]): 將兩個(gè)列連接在一起薄啥，變成一個(gè)列表；
• append($list1,$val,[$separator]): 將某個(gè)值放在列表最后逛尚；
• zip($lists...): 將幾個(gè)列表結(jié)合成一個(gè)多維的列表垄惧；
• index($list,$value): 返回一個(gè)值在列表中的位置值。

^[11]

6.1 length()函數(shù)

length() 函數(shù)主要用來返回一個(gè)列表中有幾個(gè)值绰寞，簡(jiǎn)單點(diǎn)說就是返回列表清單中有多少個(gè)值：

>>length(5px 88px (border 66px solid) 4em  (border 8em solid)) 到逊；   //返回5

列表中的參數(shù)之間使用 空格 隔開，不能使用逗號(hào)滤钱，否則將會(huì)出錯(cuò)蕾管。

^[12]

6.2 nth()函數(shù)

語法: nth($list,,$n)
nth()函數(shù)用來指定列表中每個(gè)位置的值。

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

注意： 在nth($list,$n)函數(shù)中$n必須是大于0的整數(shù)菩暗。

^[13]

6.3 join()函數(shù)

join()函數(shù)是將兩個(gè)列表連接合成一個(gè)列表掰曾。

>>join(10px 20px ,30px 40px);    //(10px 20px 30px 40px)
>>join((blue,red),(#abc,#def));    //(#0000ff, #ff0000, #aabbcc, #ddeeff)   

如果需要連接兩個(gè)以上的列表：

>>join((blue red),join((#abc #def),(#dee #eff)));   //(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

在join()函數(shù)中還有一個(gè)很特別的參數(shù)$separator，這個(gè)參數(shù)主要是用來給列表函數(shù)連接列值時(shí)停团，使用的分隔符號(hào)旷坦，默認(rèn)值：auto
除了默認(rèn)值外，還有comma和space兩個(gè)值佑稠，comma值指定列表中列表值之間使用(,)秒梅，space值指定列表中 的列表項(xiàng)之間用空格( )分割。

默認(rèn)值auto會(huì)發(fā)生多種情形:

• 如果列表一中每個(gè)值使用逗號(hào)(,)那么jion()函數(shù)合并的列表中每個(gè)列表項(xiàng)之間使用逗號(hào)分隔：

>>join((blue, red, #eff),(green orange));   //(#0000ff, #ff0000, #eeffff, #008000, # ffa500)

• 第一個(gè)列表中只有一個(gè)列表項(xiàng)舌胶，join()函數(shù)合并的列表項(xiàng)目中每個(gè)列表之間使用的分隔符會(huì)根據(jù)第二個(gè)列表項(xiàng)使用的分隔符決定：

>> join(blue,(green, orange));    //(#0000ff, #008000, #ffa500)
>> join(blue,(green orange));    //(#0000ff #008000 #ffa500)

• 第一個(gè)列表中每個(gè)值以空格分隔捆蜀，合并后也是用空格：

>>join((blue red #eff),(green,orange));   //(#0000ff #ff0000 #eeffff #008000 # ffa500)

• 合并的兩個(gè)列表都只有一個(gè)列表項(xiàng)，將會(huì)以空格分隔：

>> join(blue,red);    //(#0000ff #ff0000)

為了避免出現(xiàn)無法區(qū)分的情況幔嫂，使用join()函數(shù)時(shí)辆它，使用$separator參數(shù)來指定：

>> join(blue,red,comma);                     //(#0000ff, #ff0000)
>> join(blue,red,space);                     //(#0000ff #ff0000)
>> join((blue green),(red,orange),comma);    //(#0000ff, #008000, #ff0000, #ffa500)
>> join((blue green),(red,orange),space);    //(#0000ff #008000 #ff0000 #ffa500)
>> join((blue, green),(red,orange),comma);   //(#0000ff, #008000, #ff0000, #ffa500)
>> join((blue, green),(red,orange),space);   //(#0000ff #008000 #ff0000 #ffa500)
>> join(blue,(red,orange),comma);            //(#0000ff, #ff0000, #ffa500)
>> join(blue,(red,orange),space);            //(#0000ff #ff0000 #ffa500)
>> join(blue,(red orange),comma);            //(#0000ff, #ff0000, #ffa500)
>> join(blue,(red orange),space);            //(#0000ff #ff0000 #ffa500)

^[14]

6.4 append()函數(shù)

將某個(gè)值插入到列表中，并且處于最末位履恩。

>> append(10px 20px, 30px);    //(10px 20px 30px)
>> append((10px,20px),30px);   //(10px,20px,30px)
>> append(green,red);          //(#008000 #ff0000)
>> append(red,(green,blue));   //(#ff0000 (#008000, #0000ff))

如果沒有明確的指定 $separator 參數(shù)值锰茉，其默認(rèn)值是 auto。

• 只有一個(gè)列表項(xiàng)時(shí)切心，插入進(jìn)來的值將和原來的值會(huì)以空格的方式分隔飒筑。
• 以空格分隔列表項(xiàng)，插入進(jìn)來的列表項(xiàng)也將以空格分隔绽昏；
• 以逗號(hào)分隔列表項(xiàng)协屡，插入進(jìn)來的列表項(xiàng)也將以逗號(hào)分隔。

在 append() 函數(shù)中全谤，可以顯示的設(shè)置 $separator 參數(shù):

• comma 將會(huì)以逗號(hào)分隔列表項(xiàng);
• space 將會(huì)以空格分隔列表項(xiàng)肤晓。

>> append((blue green),red,comma);    //(#0000ff, #008000, #ff0000)
>> append((blue green),red,space);    //(#0000ff #008000 #ff0000)
>> append((blue, green),red,comma);   //(#0000ff, #008000, #ff0000)
>> append((blue, green),red,space);   //(#0000ff #008000 #ff0000)
>> append(blue,red,comma);            //(#0000ff, #ff0000)
>> append(blue,red,space);            //(#0000ff #ff0000)

^[15]

6.5 zip()函數(shù)

將多個(gè)列表值轉(zhuǎn)成一個(gè)多維的列表：

>> zip(1px 2px 3px,solid dashed dotted,green blue red);  //((1px "solid" #008000),(2px "dashed" #0000ff),(3px "dotted" #ff0000))

注意：在使用zip()函數(shù)時(shí)，每個(gè)單一的列表個(gè)數(shù)值必須是相同的，否則會(huì)報(bào)錯(cuò)：

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

^[16]

6.6 index()函數(shù)

類似JS的索引材原，找到某個(gè)值在列表中所處的位置沸久。不同的是季眷，Sass中第一個(gè)值是1余蟹，第二個(gè)值2：

>> index(1px solid red, 1px);      //1
>> index(1px solid red, solid);    //2
>> index(1px solid red, red);      //3

如果指定的值不在列表中（沒有找到相應(yīng)的值），那么返回的值時(shí)false:

>> index(1px solid red,dotted);    //false

^[17]

6.7 Introspection函數(shù)

它包括了幾個(gè)判斷型函數(shù)：

• type-of($value): 返回一個(gè)值的類型
• unit($number): 返回一個(gè)值得單位
• unitless($number): 判斷一個(gè)值是否帶有單位
• commparable($number-1, $number-2): 判斷兩個(gè)值是否可以做加子刮、減和合并

6.7.1 type-of():判斷一個(gè)值得屬性

• number
• string
• bool
• color

>> type-of(100);        //"number"
>> type-of(100px);      //"number"
>> type-of("asdf");     //"string"
>> type-of(asdf);       //"string"
>> type-of(true);       //"bool"
>> type-of(false);      //"bool"
>> type-of(#fff);       //"color"
>> type-of(blue);       //"color"
>> type-of(1 / 2 = 1);  //"string"

6.7.2 unit()函數(shù)
unit()函數(shù)主要是用來獲取一個(gè)值所使用的單位威酒，碰到復(fù)雜的計(jì)算時(shí)，其能根據(jù)運(yùn)算得到一個(gè)“多單位組合”的值挺峡，不過只允許乘葵孤、除運(yùn)算：

>> unit(100);           //""
>> unit(100px);         //"px"
>> unit(20%);           //"%"
>> unit(1em);           //"em"
>> unit(10px * 3em);    //"em * px"
>> unit(10px / 3em);    //"px / em"
>> unit(10px * 2em / 3em / 1rem);    //"em / rem" 怎么得到的？

但加減碰到不同單位時(shí) nuit()函數(shù)會(huì)報(bào)錯(cuò)橱赠，px與cm\mm運(yùn)算除外：

>> unit(1px + 1cm);    //"px"
>> unit(1px - 1cm);    //"px"
>> unit(1px + 1mm);    //"px"
>> unit(10px * 2em - 3cm / 1rem);    //SyntaxError: Incompatible units: 'cm' and 'px*em'.

unit()函數(shù)對(duì)弈單位運(yùn)算沒有規(guī)律尤仍，“px/em”這種是沒有實(shí)際意義。

6.7.3 unitless()函數(shù)
unitless() 函數(shù)只是用來判斷一個(gè)值是否帶有單位狭姨，如果不帶單位返回的值為 true宰啦，帶單位返回的值為 false：

>> unitless(100);    //true
>> unitless(100px);    //false
>> unitless(100em);    //false
>> unitless(100%);    //false
>> unitless(1 /2 );    //true
>> unitless(1 /2 + 2 );    //true
>> unitless(1px /2 + 2 );    //false

實(shí)例，調(diào)用混合宏時(shí)饼拍，如果參數(shù)沒有單位赡模，程序自動(dòng)加入單位：

@mixin adjust-location($x, $y) {
  @if unitless($x) {    
    $x: 1px * $x;
  }
  @if unitless($y) {    
    $y: 1px * $y;
  }
  position: relative; 
  left: $x; 
  top: $y;
}

.botton{
    @include adjust-location(20px, 30);
}

6.7.4 comparable()函數(shù)

用來判斷兩個(gè)數(shù)是否可以進(jìn)行“加，減”以及“合并”师抄。如果可以返回的值為 true漓柑，如果不可以返回的值是 false：

>> comparable(2px,1px);    //true
>> comparable(2px,1%);     //false
>> comparable(2px,1em);    //false
>> comparable(2rem,1em);   //false
>> comparable(2px,1cm);    //true
>> comparable(2px,1mm);    //true
>> comparable(2px,1rem);   //false
>> comparable(2cm,1mm);    //true

6.7.5 Miscellaneous函數(shù)

他有兩個(gè)值，當(dāng)條件成立返回一種值叨吮，當(dāng)條件不成立時(shí)返回另一種值：

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

當(dāng)$condition條件成立時(shí)辆布，返回的值為$if-true，否則返回的是$if-false的值：

>> if(true,1px,2px);    //1px
>> if(false,1px,2px);   //2px

^[18]

6.8 Map-數(shù)據(jù)地圖

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

首先有一個(gè)類似于 Sass 的變量一樣茶鉴，用個(gè)$ 加上命名空間來聲明 map谚殊。后面緊接是一個(gè)小括號(hào) ()，將數(shù)據(jù)以key:value 的形式賦予蛤铜，其中key和 value 是成對(duì)出現(xiàn)嫩絮，并且每對(duì)之間使用逗號(hào)(,)分隔，其中最后一組后面 沒有逗號(hào) 围肥。
其中鍵 key 是用來查找相關(guān)聯(lián)的值 value剿干。使用 map 可以很容易收集鍵的值和動(dòng)態(tài)插入。
以前定義變量的方式：

$default-color: #fff;
$primary-color: #22ae39;

使用map將可以更好的進(jìn)行管理：

$color: (
  default: #fff;
  primary: #22ae39;
)

這樣的好處是需要增加顏色變量穆刻，在 map 中可以隨意添加:

$color: (
  default: #fff;
  primary: #22ae39;
  negative: #d9534f;
)

對(duì)于 Sass 的 map置尔，還可以讓 map 嵌套 map。其實(shí)就是 map 的某一個(gè) key 當(dāng)成 map氢伟，里面可以繼續(xù)放一對(duì)或者多對(duì)key:value：

$map: (
  key1: value1,
  key2: (
    key-1: value-1,
    key-2: value-2  
  ),
  key3：value3
)

map 的嵌套實(shí)用性也非常的強(qiáng):

$theme-color: (
    default: (
        bgcolor: #fff,
        text-color: #444,
        link-color: #39f
    ),
    primary:(
        bgcolor: #000,
        text-color:#fff,
        link-color: #93f
    ),
    negative: (
        bgcolor: #f36,
        text-color: #fefefe,
        link-color: #d4e
    )
);

map自帶了七個(gè)函數(shù)：

• map-get($map,$key): 根據(jù)給定的key值榜轿，返回map中相關(guān)的值幽歼。
• map-merge($map1,$map2): 將兩個(gè)map合并成一個(gè)新的map。
• map-remove($map,$key): 從map中刪除一個(gè)key谬盐，返回一個(gè)新的map甸私。
• map-keys($map): 返回map中所有的key。
• map-value($map): 返回map中所有的value飞傀。
• map-has-key($map, $key)：根據(jù)給定的key值判斷map是否有對(duì)應(yīng)的value值皇型，如果有返回true，否則返回false砸烦。
• keywords($args): 返回一個(gè)函數(shù)的參數(shù)弃鸦，這個(gè)參數(shù)可以動(dòng)態(tài)的設(shè)置key和value。

6.8.1 map-get($map,$key)

map-get($map,$key)函數(shù)的作用是根據(jù)$key參數(shù)幢痘，返回 $key 在$map中對(duì)應(yīng)的 value值唬格。如果 $key 不存在 $map中，將返回 null 值颜说。此函數(shù)包括兩個(gè)參數(shù)：

• $map: 定義好的map购岗。
• $key: 需要遍歷的key。
  示例：

$social-colors: (
    dribbble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);

假設(shè)需要獲取Facebook鍵值對(duì)應(yīng)的值#3b5998脑沿，我們就可以使用map-get()：

.btn-facebook{
  color: map-get($social-colors, facebook)
}

編譯后的CSS：

.btn-facebook{
  color: #3b5998;
}

假設(shè)現(xiàn)在 $social-colors 這個(gè) map 沒有 $weibo 這個(gè) key :

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

編譯結(jié)果：

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

可以看出藕畔，如果 $key 不在 $map 中，不會(huì)編譯出CSS庄拇，其實(shí)在Sass中注服，map-get($social-colors, weibo)返回了一個(gè)值null，可是編譯時(shí)也不報(bào)錯(cuò)措近，這里需要注意溶弟。

6.8.2 map-has-key($map, $key)

返回一個(gè)布爾值，當(dāng) $map 中有這個(gè) $key瞭郑，則函數(shù)返回 true辜御，否則返回 false。
例如上面的map-get($map, $key)函數(shù)返回一個(gè)null值對(duì)于開發(fā)者沒有任何提示信息屈张。改變這一狀態(tài)只需要使用map-has-key($map, $key)即可：

@if map-has-key($social-colors, facebook){
  .btn-weibo{
    color: map-get($social-colors, weibo);
  }
}@else{
  @warn "No color found for weibo in $social-colors"
}

編譯結(jié)果就會(huì)報(bào)錯(cuò)擒权，這樣便于開發(fā)者調(diào)試病曾。但這樣也并不是最好的定庵，不可能每次都寫一個(gè)if語句畏浆，那么可以自定義一個(gè)函數(shù)：

@function colors($color){
  @if not map-has-key($social-colors, $color){
    @warn "No color found for `#{$color}` in $social-colors map"
  }
  @return map-get($social-colors, $color);
}

有了這個(gè)函數(shù)竟终，就可以這樣使用：

.btn-dribbble{
  color: colors(dribbble);
}
.btn-facebook{
  color: colors(facebook);
}
.btn-weibo{
  color: colors(weibo);
}

編譯后的CSS：

.btn-dribble {
  color: #ea4c89;
}
.btn-facebook {
  color: #3b5998;
}

同時(shí)你會(huì)發(fā)現(xiàn)終端報(bào)錯(cuò)：
No color found for "weibo" in $social-colors map. Property omitted.
報(bào)錯(cuò)總比不報(bào)錯(cuò)強(qiáng)太多。

同時(shí)扼仲，上面的代碼也可以用$each來簡(jiǎn)化：

@each $social-network,$social-color in $social-colors {
    .btn-#{$social-network} {
        color: colors($social-network);
    }
}

$each簡(jiǎn)化

6.8.3 map-keys($map)

map-keys(#map)函數(shù)將會(huì)返回$map中所有key虎锚，如果把這些值賦予一個(gè)變量壁查，那他就是一個(gè)列表：

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

相當(dāng)于：

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

上面的示例同樣也可以用這個(gè)方法來修改：

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

這段代碼，使用了map-keys將$social-colors這個(gè)map的所有key取出璧尸，并賦予給$names列表咒林。然后通過index($names,$color)返回在$color在$names的位置，如果這個(gè)位置不存在爷光，將返回提示信息垫竞，如果存在將返回正確的值。

例如瞎颗，weibo不在$social-colors中件甥，那么不會(huì)編譯CSS捌议，終端會(huì)有提示信息哼拔。
同樣也可遍歷出所有的值：
@each:

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

@for:

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

6.8.4 map-valus($map)、map-merge($map1,$map2)

• map-valus($map)獲取的是$map的所有value值瓣颅。
  也是一個(gè)列表倦逐。而且相同的value也會(huì)全部獲取出來。例如：

map-values($social-colors)

將會(huì)返回：

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

值與值之間同樣用逗號(hào)分隔宫补。

• map-merge($map1,$map2)合并這兩個(gè)map檬姥，然后得到一個(gè)新的map
  如果你要快速將新的值插入到$map中的話，這種方法是最佳方法：
  
  合并兩個(gè)map
  
  不過需要注意的是如果$map1和$map2有相同的$key粉怕，那么$map2中的key將會(huì)取代$map1中的key值：
  
  $map2中的key將會(huì)取代$map1中的key值

6.8.5 map-remove(#map,$key)健民、keywords($args)

• map-remove($map,$key)
  用來刪除當(dāng)前$map中的某個(gè)$key值，從而得到一個(gè)新的map贫贝。

$newmap:map-remove($social-colors,dribbble)

返回的新map：

$map:(
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
)

如果要?jiǎng)h除的$key并不存在于$map中秉犹，那么map-remove()函數(shù)返回新的map和以前的map一樣。

• map-remove($map,$key)
  keywords($args) 函數(shù)可以說是一個(gè)動(dòng)態(tài)創(chuàng)建 map 的函數(shù)稚晚〕缍拢可以通過混合宏或函數(shù)的參數(shù)變創(chuàng)建 map。參數(shù)也是成對(duì)出現(xiàn)客燕，其中 $args 變成 key(會(huì)自動(dòng)去掉$符號(hào))鸳劳，而 $args 對(duì)應(yīng)的值就是value。

@mixin map($args...){
    @debug keywords($args);
}

@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);

在命令終端可以看到一個(gè)輸入的 @debug 信息

 DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)

^[19]

七也搓、顏色函數(shù)

^[20]

7.1 RGB函數(shù)

sass為RGB顏色提供六種函數(shù)：

• rgb($red,$green,$blue): 根據(jù)紅赏廓、綠、藍(lán)三個(gè)值創(chuàng)建一個(gè)顏色
• rgba($red,$green,$blue,$alpha): 根據(jù)紅傍妒、綠幔摸、藍(lán)和透明度創(chuàng)建一個(gè)顏色
• red($color): 從一個(gè)顏色中獲取其中紅色值；
• green($color): 從一個(gè)顏色中獲取其中綠色值拍顷；
• blue($color): 從一個(gè)顏色中獲取其中藍(lán)色值抚太；
• mix($color-1,$color-2,[$weight]): 把兩種顏色混合在一起；

$ sass -i             //在終端開啟Sass函數(shù)計(jì)算。
>> rgb(200,40,88)     //根據(jù)r:200,g:40,b:88計(jì)算出一個(gè)十六進(jìn)制顏色值
#c82858
>> rgba(#c82858,.65)  //根據(jù)#c82858的65%透明度計(jì)算出一個(gè)rgba顏色值
rgba(200, 40, 88, 0.65)
>> red(#c82858)       //從#c82858顏色值中得到紅色值 200
200
>> green(#c82858)     //從#c82858顏色值中得到綠色值 40
40
>> blue(#c82858)      //從#c82858顏色值中得到藍(lán)色值 88
88
>> mix(#c82858,rgba(200,40,80,.65),.3)  //把#c82858和rgba(200,40,88,.65) 兩顏色按比例混合得到一個(gè)新顏色
rgba(200, 40, 80, 0.65105)

^[21]

7.2 RGBA()函數(shù)

主要用來將一個(gè)顏色根據(jù)透明度轉(zhuǎn)換成RGBA的顏色尿贫，主要有兩種語法：

rgba($red,$green,$blue,$alpha)   //將一個(gè)rgba顏色轉(zhuǎn)譯出來电媳，和未轉(zhuǎn)移的值一樣。
rgba($color,$alpha)   //將一個(gè)Hex顏色轉(zhuǎn)換成rgba顏色庆亡。

其中匾乓，rgba($color,$alpha)函數(shù)最常使用。等價(jià)的CSS3的寫法存在兼容性問題又谋。

//CSS
color: rgba(#f36,.5);   //這個(gè)寫法在CSS中無效

在Sass中rgba()函數(shù)的寫法：

//SCSS
$color: #f36;
$bgColor:orange;
$borderColor:green;

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

rgba函數(shù)

調(diào)用定義的變量：

.rgba{
  color: rgba($color,.5);
  background: rgba($bgColor,.5);
  border-color: rgba($borderColor,.5);
}

rgba調(diào)用變量

7.3 Mix()函數(shù)

mix()函數(shù)是將兩種顏色根據(jù)一定的比例混合在一起拼缝，生成另一種顏色，語法如下：

mix($color-1,$color-2,$weight);

$color-1 和$color-2指的是你需要合并的顏色彰亥，顏色可以是任何表達(dá)式咧七，也可以是顏色變量。
$weight為合并的比例任斋，默認(rèn)值為50%继阻，取值范圍是0~1。如果指定的比例是25%废酷，那么$color-1的比例是25%瘟檩，$color-2是75%。
使用方法也很簡(jiǎn)單：

mix(#f00,#00f)  =>  #7f007f
mix(#f00,#00f,25%)  =>  #3f00bf
mix(rgba(255,0,0,.5),#00f)  =>  rgba(63,0,191,0.75)

在前例的基礎(chǔ)上做個(gè)修改：

//SCSS
$color1: #a63;
$color2: #fff;
$bgColor1: #f36;
$bgcolor2: #e36;
$borderColor1: #c36;
$borderColor2: #b36;

.mix{
  background: mix($bgColor1,$bgColor2,.75);
  color: mix($color1,$color2,.7);
  border-color: mix($borderColor1,$bgColor2,.5);
}

編譯之后的代碼：

.mix {
  background: #ee3366;
  color: #fefefe;
  border-color: #bb3366;
}

^[23]

7.4 HSL函數(shù)簡(jiǎn)介

• hsl($hue,$saturation,lightness): 通過色相澈蟆、飽和度墨辛、和亮度的值創(chuàng)建一個(gè)顏色；
• hsla($hue,$saturation,$lightness,$alpha): 通過色相趴俘、飽和度睹簇、和亮度和透明度創(chuàng)建一個(gè)顏色；
• hue($color): 從一個(gè)顏色中獲取色相值哮幢；
• saturation($color): 從一個(gè)顏色中獲取飽和度带膀；
• lightness($color): 從一個(gè)顏色中獲取亮度值；
• adjust-hue($color,$degrees): 通過改變一個(gè)顏色的色相值橙垢，創(chuàng)建一個(gè)新的顏色垛叨；
• lighten($color,$amount): 通過改變顏色的亮度值，讓顏色變亮柜某，創(chuàng)建一個(gè)新的顏色嗽元；
• darken($color,$amount): 通過改變顏色亮度值，改變顏色喂击，創(chuàng)建一個(gè)新的顏色剂癌；
• saturate($color,$amount): 通過增加顏色更飽和度，創(chuàng)建一個(gè)新的顏色翰绊；
• desaturate($color,$amount): 通過減少顏色飽和度佩谷，從而創(chuàng)建一個(gè)新的顏色旁壮；
• grayscale($color): 將一個(gè)顏色變成灰色，相當(dāng)于desaturate($color,100%);
• complement($color): 返回一個(gè)補(bǔ)充色谐檀，相當(dāng)于adjust-hue($color,180deg);
• invert($color): 返回一個(gè)反相色抡谐，紅、綠桐猬、藍(lán)色值倒過來麦撵，而透明度不變。
  示例：

sass -i
>> hsl(200,30%,60%)         //通過h200,s30%溃肪，l60%創(chuàng)建一個(gè)顏色
#7aa3b8
>> hsla(200,30%,60%,.8)     //通過h200,s30%免胃，l60%,a80%創(chuàng)建一個(gè)顏色
rgba(122, 163, 184, 0.8)
>> hue(#7ab)                //得到#7ab顏色的色相值
195deg
>> saturation(#7ab)         //得到#7ab顏色的飽和度值
33.33333%
>> lightness(#7ab)          //得到#7ab顏色的亮度值
60%
>> adjust-hue(#f36,150deg)  //改變#f36顏色的色相值為150deg
#33ff66
>> lighten(#f36,50%)        //把#f36顏色亮度提高50%
#ffffff
>> darken(#f36,50%)         //把#f36顏色亮度降低50%
#33000d
>> saturate(#f36,50%)       //把#f36顏色飽和度提高50%
#ff3366
>> desaturate(#f36,50%)     //把#f36顏色飽和度降低50%
#cc667f
>> grayscale(#f36)          //把#f36顏色變成灰色
#999999
>> complement(#f36)
#33ffcc
>> invert(#f36)
#00cc99

HSL 函數(shù)中最常見的應(yīng)該是 lighten()、darken()惫撰、saturate()羔沙、desaturate()、grayscale()润绎、complement()和 invert() 幾個(gè)函數(shù)撬碟。

7.4.1 lighten()和darken()

$baseColor: #ad141e;

使用 lighten() 和 darken() 函數(shù)來修改10%亮度值：

.lighten{
  background: lighten($baseColor,10%);
}
.darken{
  background: darken($baseColor,10%);
}

編譯的CSS：

.lighten{
  background: #db1926;
}
.darken{
  background: #7f0f16;
}

使用終端來驗(yàn)證一下：

>> lightness(#ad141e)     //原色的亮度值
37.84314%
>> lightness(#db1926)     //在原色的亮度值基礎(chǔ)上增加10%
47.84314%
>> lightness(#7f0f16)     //在原色的亮度值基礎(chǔ)上減少10%
27.84314%

注意：當(dāng)顏色的亮度值接近或大于 100%诞挨，顏色會(huì)變成白色莉撇；反之顏色的亮度值接近或小于 0 時(shí)，顏色會(huì)變成黑色惶傻。

7.4.2 saturate()和desaturate()

$baseColor: #ad141e;
.saturate{
  background: saturate($baseColor,30%);    //在原色飽和度基礎(chǔ)上增加飽和度
}
.desaturate{
  background: desaturate($baseColor,30%);  //在原色的飽和度基礎(chǔ)上減少飽和度
}

編譯的CSS代碼：
.saturate{
background: #c1000d;
}
.desaturate{
background: #903137;
}

同樣使用saturation()在終端進(jìn)行計(jì)算：

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

7.4.3 adjust-hue()函數(shù)

需要一個(gè)顏色和色相度數(shù)值棍郎。通常這個(gè)度數(shù)值是在-360deg至360deg之間，也可以是百分?jǐn)?shù)银室。

$baseColor: #ad141e
.adjust-hue-deg{
  background: adjust-hue($baseColor,30deg);
}
.adjust-hue-per{
  background: adjust-hue($baseColor,30%)
}

編譯出的CSS：

.adjust-hue-deg{
  background: #ad5614;
}
.adjust-hue-per{
  background: #ad5614;
}

通過轉(zhuǎn)譯的代碼涂佃，發(fā)現(xiàn)色值是一樣的，如果兩個(gè)值（不看單位）相同蜈敢，計(jì)算出來的顏色也會(huì)一樣辜荠。同樣的，可以通過hue()函數(shù)得到顏色轉(zhuǎn)換前后的色相值：

>> hue(#ad141e) //原顏色色相值
356.07843deg
>> hue(#ad5614) //在原色色相基礎(chǔ)上增加30deg
25.88235deg

在 HSL 顏色表達(dá)方式上抓狭，色相是從 -360 和 360 之間伯病，負(fù)值逆時(shí)針轉(zhuǎn)，正值順時(shí)針轉(zhuǎn)否过。在這個(gè)實(shí)例中午笛，原色的色相值約 356deg，加上 30deg 后苗桂，新顏色變成了 386deg药磺，但我們的色盤中并沒有比 360deg 更大的值，當(dāng)值大于 360deg時(shí)煤伟，表示色盤轉(zhuǎn)完了一圈癌佩，繼續(xù)順時(shí)針轉(zhuǎn)余下的值（這里是 26deg）木缝，那么這個(gè)繼續(xù)轉(zhuǎn)的值就是新顏色的色相值。

7.4.4 grayscale()函數(shù)

這個(gè)函數(shù)會(huì)把顏色的飽和度值直接調(diào)至 0%围辙，所以此函數(shù)與 desaturate($color,100%) 所起的功能是一樣的氨肌。一般這個(gè)函數(shù)能將彩色顏色轉(zhuǎn)換成不同程度的灰色。例如：

//SCSS
$baseColor: #ad141e;
.grayscale{
  background: grayscale($baseColor);
}
.desaturate{
  background: desaturate($baseColor,100%);
}

來看看計(jì)算出來的 HSL 各個(gè)值的變化：

>> hue(#ad141e)
356.07843deg
>> hue(#616161)
0deg
>> saturation(#ad141e)
79.27461%
>> saturation(#616161)
0%
>> lightness(#ad141e)
37.84314%
>> lightness(#616161)
38.03922%

grayscale()函數(shù)處理過的顏色酌畜，其最大的特征就是顏色飽和度為0怎囚。

^[24]

7.5 Opacity函數(shù)簡(jiǎn)介

在CSS中除了可以使用rgba、hsla和transform是通過顏色的透明通道做處理桥胞，
而opacity()是控制整個(gè)元素的透明度恳守。

Sass提供了系列透明函數(shù)，只不過這系列的透明函數(shù)主要用來處理顏色透明度：

• alpha($color) / opacity($color): 獲取顏色透明度值贩虾；
• rgba($color,$alpha): 改變顏色透明度值催烘；
• opacity($color,$amount) / fade-in($color,$amount): 使顏色更不透明；
• transparentize($color,$amount) / fade-out($color,$amount): 使顏色更加透明缎罢；

7.5.1 alpha()伊群、opacity()函數(shù)

這個(gè)兩個(gè)函數(shù)的主要功能是用來獲取一個(gè)顏色的透明度值。如果顏色沒有特別指定透明度策精，那么這兩個(gè)函數(shù)得到的值都會(huì)是 1：

>> alpha(red)
1
>> alpha(rgba(red,.8))
0.8
>> opacity(red)
1
>> opacity(rgba(red,.8))
0.8

7.5.2 rgba()函數(shù)

有一個(gè) rgba() 函數(shù)可以創(chuàng)建一個(gè)顏色舰始，同時(shí)還可以對(duì)顏色修改其透明度。其可以接受兩個(gè)參數(shù)咽袜，第一個(gè)參數(shù)為顏色丸卷，第二個(gè)參數(shù)是你需要設(shè)置的顏色透明值。

>> rgba(red,.5)
rgba(255, 0, 0, 0.5)
>> rgba(#dedede,.5)
rgba(222, 222, 222, 0.5)
>> rgba(rgb(34,45,44),.5)
rgba(34, 45, 44, 0.5)
>> rgba(rgba(33,45,123,.2),.5)
rgba(33, 45, 123, 0.5)
>> rgba(hsl(33,7%,21%),.5)
rgba(57, 54, 50, 0.5)
>> rgba(hsla(33,7%,21%,.9),.5)
rgba(57, 54, 50, 0.5)

7.5.3 opacify()询刹、fade-in()函數(shù)

這兩個(gè)函數(shù)是用來對(duì)已有顏色的透明度做一個(gè)加法運(yùn)算谜嫉，會(huì)讓顏色更加不透明。
其接受兩個(gè)參數(shù)凹联，第一個(gè)是原始色沐兰，第二個(gè)是你需要增加的透明度值，器取值范圍主要是在0~1之間蔽挠，當(dāng)透明度值增加到大于1時(shí)住闯，會(huì)以1計(jì)算，表示顏色不具有任何透明度象泵。

>> opacify(rgba(22,34,235,.6),.2)
rgba(22, 34, 235, 0.8)
>> opacify(rgba(22,34,235,.6),.5)
#1622eb
>> opacify(hsla(22,34%,23%,.6),.15)
rgba(79, 53, 39, 0.75)
>> opacify(hsla(22,34%,23%,.6),.415)
#4f3527
>> opacify(red,.15)
#ff0000
>> opacify(#89adde,.15)
#89adde
>> fade-in(rgba(23,34,34,.5),.15)
rgba(23, 34, 34, 0.65)
>> fade-in(rgba(23,34,34,.5),.615)
#172222

7.5.4 transparentize()寞秃、fade-out()函數(shù)

減少透明度。這個(gè)函數(shù)會(huì)讓透明值做減法運(yùn)算偶惠，當(dāng)計(jì)算出來的結(jié)果小于0時(shí)春寿，會(huì)以0計(jì)算，表示全透明忽孽。

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

^[25]

八绑改、Sass的@規(guī)則

^[26]

8.1 @import

Sass支持所有CSS3的@規(guī)則谢床，以及一些Sass專屬的規(guī)則，也被稱為“指令（directives）”厘线。這些規(guī)則在Sass中具有不同的功效识腿。

Sass擴(kuò)展了CSS的@import規(guī)則讓它能夠引入Scss和Sass文件，所有引入的Scss和Sass文件都會(huì)被合并輸出一個(gè)單一的CSS文件造壮。另外渡讼，被導(dǎo)入的文件中所定義的變量或 mixins都可以在主文件中使用。

Sass會(huì)在當(dāng)前目錄下尋找其他Sass文件耳璧，如果是Rack成箫、Rails或Merb環(huán)境中則是Sass文件目錄。也可以通過 ：load_paths選項(xiàng)或者在命令行中使用 --load-path選項(xiàng)來指定額外的搜索目錄旨枯。

@import根據(jù)文件名引入蹬昌，默認(rèn)情況下，他會(huì)尋找Sass文件并直接引入攀隔，但是皂贩，在少數(shù)幾種情況下，但是昆汹，在少數(shù)幾種情況下明刷，它會(huì)被編譯成CSS的@import規(guī)則：

• 如果文件的擴(kuò)展名是.css。
• 如果文件名以http:// 開頭筹煮。
• 如果文件名是url()遮精。
• 如果@import包含了任何媒體查詢（media queries）。
  如果刪除情況都沒有出現(xiàn)败潦，并且擴(kuò)展名是 .scss或 .sass，該名稱的Sass或Scss文件就會(huì)被引入准脂。如果沒有擴(kuò)展名劫扒，Sass將試著找出具有 .scss或 .sass擴(kuò)展名的同名文件并將其引入。

例如：@import "foo.scss";
或：@import "foo";
都將引入 foo.scss文件狸膏。

但是：

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

都將編譯為：

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo)

也可以通過一個(gè)@import引入多個(gè)文件沟饥。例如：

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

將引入rounded-corners和text-shadow兩個(gè)文件。

如果有一個(gè)Scss或Sass文件需要引入湾戳，但是你又不希望它被編譯為一個(gè)CSS文件贤旷，這時(shí)，可以再文件名前面加一個(gè)下劃線砾脑，就能避免被編譯幼驶。浙江告訴Sass不要把它編譯成CSS文件。然后韧衣，你就可以像往常一樣引入這個(gè)文件了盅藻，而且可以省略掉文件名的下劃線购桑。

例如你有一個(gè)文件叫做 _colors.scss。這樣就不會(huì)生成 -colors.css文件了氏淑，而且你可以這樣：

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

注意：在同一個(gè)目錄不能同時(shí)存在帶下劃線和不帶下劃線的同名文件勃蜘。例如， _colors.scss不能與 colors.scss并存假残。

嵌套@import
雖然大部分時(shí)間只需在頂層文件使用@import就行了缭贡，但是，你還可以把他們包含在css規(guī)則和@media規(guī)則中辉懒。

來看官網(wǎng)的示例：
假設(shè)要引入example.scss的文件中包含這樣的代碼：

.example{
  color: red;
}

然后這樣引用：

#main{
  @import "example";
}

編譯出來的CSS：

#main .example{
  color: red;
}

^[27]

8.2 @media

Sass中的@media指令和CSS的使用規(guī)則一樣的簡(jiǎn)單匀归，但他有另外一個(gè)功能，可以嵌套在CSS規(guī)則中耗帕，有點(diǎn)類似JS的冒泡功能一樣穆端。

• 如果在樣式中使用@media指令，他將冒泡到外面仿便。來看一個(gè)簡(jiǎn)單示例：

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

編譯出來的CSS：

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

• @media也可以嵌套 @media：

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

此時(shí)編譯出來：

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

• 在使用 @media時(shí)還可以使用插值 #{}：

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value){
    .sidebar{
        width: 500px;
    }
}

編譯出來的CSS：

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

^[28]

8.3 @extend

Sass中的 @extend 是用來擴(kuò)展選擇器或占位符体啰。例如：

• 擴(kuò)展選擇器：
  @extend不止擴(kuò)展類選擇器，還可以擴(kuò)展任何選擇器嗽仪，比如 .special.cool, a:hover,或a.user[href="#"]荒勇，例如：

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

編譯出來：

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

再看一個(gè)復(fù)雜的：

.hoverlink{
  @extend a:hover;
}
.comment a.user:hover{
  font-weight: bold;
}

他會(huì)被編譯為：

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

• 多個(gè)擴(kuò)展
  假設(shè)某個(gè)樣式要繼承多個(gè)地方的樣式，那么可以使用 @extend來繼承多個(gè)選擇器或占位符的樣式闻坚，如：

.error{
  border: 1px #f00;
  background-color: #fdd;
}
.attention{
  font-size: 3em;
  background-color: #ff0;
}
.seriousError{
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

• 擴(kuò)展單一選擇器
  前面我們知道沽翔，%placeholder不使用@extend顯示調(diào)用，是不會(huì)生成任何樣式代碼窿凤。在選擇器中使用占位符一樣仅偎。比如：

#context a%extreme{
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

這段代碼在不調(diào)用之前不產(chǎn)生任何代碼，只有能過 @extend調(diào)用之后才產(chǎn)生代碼：

.notice{
  @extend %extreme;
}

編譯出來的CSS

#context a.notice{
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

就是把.notice替換為%extreme

^[29]

8.4 @at-root

@at-root字面解釋為跳出根元素雳殊。當(dāng)你選擇器嵌套多層之后橘沥，就想讓某個(gè)選擇器跳出，此時(shí)就可以使用 @at-root夯秃。來看一個(gè)簡(jiǎn)單示例：

.a{
  color: red;
  .b{
    color: orange;
    .c{
      color: yellow;
      @at-root .d{
        color: green;
      }
    }
  }
}

編譯出來的CSS：

.a {
  color: red;
}
.a .b {
  color: orange;
}
.a .b .c {
  color: yellow;
}
.d {
  color: green;
}

^[30]

8.5 @debug

@debug在Sass中是用來調(diào)試的座咆，當(dāng)你在Sass的源碼中使用了@debug指令之后，Sass代碼在編譯出錯(cuò)時(shí)仓洼，在命令終端會(huì)輸出你設(shè)置的提示BUG：

@debug 10em + 12em;

會(huì)輸出：

Line 1 DEBUG: 22em

^[31]

8.6 @warn

@warn和@debug功能類似介陶，用來幫助我們更好的調(diào)試Sass。如：

@mixin adjust-location($x, $y) {
  @if unitless($x) {      //unitless是內(nèi)置函數(shù)色建，判斷數(shù)值是否有“單位”
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

.botton{
    @include adjust-location(20px, 30);
}

編譯的CSS：

.botton {
  position: relative;
  left: 20px;
  top: 30px;
}

^[32]

8.7 @error

功能和上面兩個(gè)類似：

@mixin error($x){
 @if $x < 10{
   width: $x * 10px;
 }@else if $x == 10{
   width: $x;
 }@else{
   @error "你需要將#{$x}值設(shè)置在10以內(nèi)的數(shù)"
 }
}

.test{
 @include error(15);
}

編譯的時(shí)候提示：

你需要將15值設(shè)置在10以內(nèi)的數(shù)  on line 7 at column 5

目錄

1. 四哺呜、Sass的控制命令 ?

2. ??4.1 @if ?

3. ??4.2 @for循環(huán)（上） ?

4. ??4.3 @for循環(huán) （下） ?

5. ??4.4 @while循環(huán) ?

6. ??4.5 @each循環(huán) ?

7. 五、Sass的函數(shù)功能-字符串函數(shù)與數(shù)字函數(shù) ?

8. ??5.1 字符串函數(shù) ?

9. ??5.2 數(shù)字函數(shù) ?

10. 六镀岛、Sass的函數(shù)功能-列表函數(shù) ?

11. ??6.1 length()函數(shù) ?

12. ??6.2 nth()函數(shù) ?

13. ??6.3 join()函數(shù) ?

14. ??6.4 append()函數(shù) ?

15. ??6.5 zip()函數(shù) ?

16. ??6.6 index()函數(shù) ?

17. ??6.7 Introspection函數(shù) ?

18. ??6.8 Map-數(shù)據(jù)地圖 ?

19. 七弦牡、顏色函數(shù) ?

20. ??7.1 RGB函數(shù) ?

21. ??7.2 RGBA()函數(shù) ?

22. ??7.3 Mix()函數(shù) ?

23. ??7.4 HSL函數(shù)簡(jiǎn)介 ?

24. ??7.5 Opacity函數(shù)簡(jiǎn)介 ?

25. 八友驮、Sass的@規(guī)則 ?

26. ??8.1 @import ?

27. ??8.2 @media ?

28. ??8.3 @extend ?

29. ??8.4 @at-root ?

30. ??8.5 @debug ?

31. ??8.6 @warn ?

32. ??8.7 @error ?