@if

@if 指令是一個(gè) SassScript，它可以根據(jù)條件來處理樣式塊，如果條件為 true 返回一個(gè)樣式塊，反之 false 返回另一個(gè)樣式塊。在 Sass 中除了 @if 之，還可以配合 @else if 和 @else 一起使用。
假設(shè)要控制一個(gè)元素隱藏或顯示，我們就可以定義一個(gè)混合宏，通過 @if...@else... 來判斷傳進(jìn)參數(shù)的值來控制 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);
}

@for

在制作網(wǎng)格系統(tǒng)的時(shí)候，大家應(yīng)該對(duì) .col1~.col12 這樣的印象較深。在 CSS 中你需要一個(gè)一個(gè)去書寫，但在 Sass 中，可以使用 @for 循環(huán)來完成。

@for $i from <start> through <end>
@for $i from <start> to <end>
@for $i from 1 through 5{
    .m-width-#{$i} {
        width: 100px*$i;
    }
}
// 生成的代碼
.m-width-1{
  width: 100px
}
.m-width-2{
  width: 200px
}
一直到5

$i 表示變量
start 表示起始值
end 表示結(jié)束值
這兩個(gè)的區(qū)別是關(guān)鍵字 through 表示包括 end 這個(gè)數(shù)，而 to 則不包括 end 這個(gè)數(shù)。

@while

@while 指令也需要 SassScript 表達(dá)式（像其他指令一樣），并且會(huì)生成不同的樣式塊，直到表達(dá)式值為 false 時(shí)停止循環(huán)。這個(gè)和 @for 指令很相似，只要 @while 后面的條件為 true 就會(huì)執(zhí)行

//SCSS
$types: 5;  變量
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1; // 減1 防止進(jìn)入死循環(huán)
}

@each

@each 循環(huán)就是去遍歷一個(gè)列表，然后從列表中取出對(duì)應(yīng)的值。

@each 循環(huán)指令的形式：

@each $var in <list>

@sass 函數(shù)

在 Sass 中除了可以定義變量，具有 @extend、%placeholder 和 mixins 等特性之外，還自備了一系列的函數(shù)功能。其主要包括：

字符串函數(shù)

  unquote($string)：刪除字符串中的引號(hào)；
  quote($string)：給字符串添加引號(hào)

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

  percentage()函數(shù)主要是將一個(gè)不帶單位的數(shù)字轉(zhuǎn)換成百分比形式： 不能帶有單位否則報(bào)錯(cuò)
  round() 函數(shù)可以將一個(gè)數(shù)四舍五入為一個(gè)最接近的整數(shù)
  ceil() 函數(shù)將一個(gè)數(shù)轉(zhuǎn)換成最接近于自己的整數(shù)，會(huì)將一個(gè)大于自身的任何小數(shù)轉(zhuǎn)換成大于本身 1 的整數(shù)。也就是只做入，不做舍的計(jì)算
  floor() 函數(shù)剛好與 ceil() 函數(shù)功能相反，其主要將一個(gè)數(shù)去除其小數(shù)部分，并且不做任何的進(jìn)位。也就是只做舍，不做入的計(jì)算
  abs( ) 函數(shù)會(huì)返回一個(gè)數(shù)的絕對(duì)值。
  min() 函數(shù)功能主要是在多個(gè)數(shù)之中找到最小的一個(gè)，這個(gè)函數(shù)可以設(shè)置任意多個(gè)參數(shù) min(1,2,3) :如果帶單位要保證單位統(tǒng)一
  max() 獲取最大值
  random() 函數(shù)是用來獲取一個(gè)隨機(jī)數(shù)：

列表函數(shù)

  length($list)：返回一個(gè)列表的長度值；
  nth($list, $n)：返回一個(gè)列表中指定的某個(gè)標(biāo)簽值 nth(10px 20px 30px,1)  //10px
  join($list1, $list2, [$separator])：將兩個(gè)列給連接在一起，變成一個(gè)列表； [$separator] 指定鏈接的字符  join() 只能將兩個(gè)列表連接成一個(gè)列表，如果直接連接兩個(gè)以上的列表將會(huì)報(bào)錯(cuò)：
  append($list1, $val, [$separator])：將某個(gè)值放在列表的最后；
  如果沒有明確的指定 $separator 參數(shù)值，其默認(rèn)值是 auto。  comma  space
    如果列表只有一個(gè)列表項(xiàng)時(shí)，那么插入進(jìn)來的值將和原來的值會(huì)以空格的方式分隔。
    如果列表中列表項(xiàng)是以空格分隔列表項(xiàng)，那么插入進(jìn)來的列表項(xiàng)也將以空格分隔；
    如果列表中列表項(xiàng)是以逗號(hào)分隔列表項(xiàng)，那么插入進(jìn)來的列表項(xiàng)也將以逗號(hào)分隔。

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

  zip($lists…)：將幾個(gè)列表結(jié)合成一個(gè)多維的列表；
  index($list, $value)：返回一個(gè)值在列表中的位置值。
      >> index(1px solid red, red)  //3

Introspection 函數(shù)

type-of($value)：返回一個(gè)值的類型

number 為數(shù)值型。type-of(100)
string 為字符串型。type-of(aaaf)
bool 為布爾型。 type-of(true) 
color 為顏色型。type-of(red)

unit($number)：返回一個(gè)值的單位

unit(100px)  //px 

unitless($number)：判斷一個(gè)值是否帶有單位

unitless() 函數(shù)相對(duì)來說簡(jiǎn)單明了些，只是用來判斷一個(gè)值是否帶有單位，如果不帶單位返回的值為 true，帶單位返回的值為 false

comparable(number-2)：判斷兩個(gè)值是否可以做加、減和合并

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

Miscellaneous 函數(shù)

在這里把 Miscellaneous 函數(shù)稱為三元條件函數(shù)，主要因?yàn)樗?JavaScript 中的三元判斷非常的相似。他有兩個(gè)值，當(dāng)條件成立返回一種值，當(dāng)條件不成立時(shí)返回另一種值：if(true,1px,2px) 1px

map函數(shù)

Sass 的 map 常常被稱為數(shù)據(jù)地圖，也有人稱其為數(shù)組，因?yàn)樗偸且?key:value 成對(duì)的出現(xiàn)，但其更像是一個(gè) JSON 數(shù)據(jù)
map 的嵌套實(shí)用性也非常的強(qiáng)，大家可能有碰到過換皮膚的項(xiàng)目，可能每一套皮膚對(duì)應(yīng)的顏色蠻多的，那么使用此功能來管理顏色的變量就非常的有條理性，便于維護(hù)與管理。你可以這樣使用
$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-get(key)：根據(jù)給定的 key 值，返回 map 中相關(guān)的值。如果key值不存在就不會(huì)編譯樣式也不會(huì)報(bào)錯(cuò)

$social-colors: (
dribble: #ea4c89,
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
.home-text{
    color: map-get($social-colors,facebook);       
}

map-has-key(key)：根據(jù)給定的 key 值判斷 map 是否有對(duì)應(yīng)的 value 值，如果有返回 true，否則返回 false。

  map-has-key($map,$key) 函數(shù)將返回一個(gè)布爾值。當(dāng) $map 中有這個(gè) $key，則函數(shù)返回 true，否則返回 false。前面的示例，
當(dāng) $key 不在 $map 中時(shí)，使用 map-get($map,$key) 函數(shù)將返回一個(gè) null 值。但對(duì)于開發(fā)人員，
 并看不到任何提示信息。如果使用 map-has-key($map,$key) 函數(shù)就可以改變這一狀態(tài)。我們來看一個(gè)簡(jiǎn)單的示例。

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

map-merge(map2)：將兩個(gè) map 合并成一個(gè)新的 map。

map-remove(key)：從 map 中刪除一個(gè) key，返回一個(gè)新 map。

map-keys($map)：返回 map 中所有的 key。

map-values($map)：返回 map 中所有的 value。

map-values($map) 函數(shù)類似于 map-keys($map) 功能，不同的是 map-values($map )獲取的是 $map 的所有 value 值，
可以說也將是一個(gè)列表。而 且，map-values($map) 中如果有相同的 value 也將會(huì)全部獲取出來。

keywords($args)：返回一個(gè)函數(shù)的參數(shù)，這個(gè)參數(shù)可以動(dòng)態(tài)的設(shè)置 key 和 value

顏色函數(shù)

rgba(#c82858,.65) //根據(jù)#c82858的65%透明度計(jì)算出一個(gè)rgba顏色值
rgba(200, 40, 88, 0.65)
mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 兩顏色按比例混合得到一個(gè)新顏色
rgba(200, 40, 80, 0.65105)

Mix 函數(shù)是將兩種顏色根據(jù)一定的比例混合在一起，生成另一種顏色。其使用語法如下：
mix(color-2,color-1 和 weight 為 合并的比例（選擇權(quán)重），默認(rèn)值為 50%，其取值范圍是 0~1 之間。它是每個(gè) RGB 的百分比來衡量，當(dāng)然透明度也會(huì)有一定的權(quán)重。默認(rèn)的比例是 50%，這意味著兩個(gè)顏色各占一半，如果指定的比例是 25%，這意味著第一個(gè)顏色所占比例為 25%，第二個(gè)顏色所占比例為75%

在 RGB 顏色函數(shù)中，在實(shí)際中常用的主要是 rgba() 和 mix() 兩個(gè)函數(shù)，而 rgb() 函數(shù)只能快速的將一個(gè) rgb 顏色轉(zhuǎn)換成十六進(jìn)制顏色表達(dá)，red()、green() 和 blue() 函數(shù)，只能取得某一顏色的一個(gè)值

三元函數(shù)等

當(dāng)然除了自備的函數(shù)功能之外，我們還可以根據(jù)自己的需求定義函數(shù)功能，常常稱之為自定義函數(shù)

@規(guī)則

@import

根據(jù)文件名引入。 默認(rèn)情況下，它會(huì)尋找 Sass 文件并直接引入， 但是，在少數(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ò)展名的同名文件并將其引入。

@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;
}
}
編譯出來：

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

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

.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
被編譯為：
.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
background-image: url("/image/hacked.png"); }

.seriousError {
border-width: 3px; }

@at-root

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

.c {
    color: yellow;
  @at-root .d {
    color: green;
  }
}
 // 生成
c {
color: yellow;
}
.d {
color: green;
}

@debug

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

@warn

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @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;
}

@error

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