摘要：布爾值布爾值主要用于的分支結構中判斷使用，布爾值的操作符有和，就是與或非。此外比較操作符只能作用于數字，但是可作用于所有類型，這些操作符返回布爾值。

Sass筆記關于sass的基礎部分已經寫完，這一篇介紹Sass的高級特性——腳本特性。Sass能做很多事讓樣式表更智能，我們先會看到Sass眼中的數據類型，在這些數據類型上會有可進行的操作，此外，Sass中的內置函數（尤其是顏色函數）能幫你自動計算很多東西，sass還有自己一套控制結構語法，能實現循環或者分支，這一切都賦予了sass腳本的特性。

只要能放在屬性右邊的都是表達式，常見的，表達式是一個簡單的值，但表達式也可以包含數學運算符，表達式可以出現在屬性或者變量值中的任何地方。最直白的理解是，表達式是一串東西，這串東西中包含了運算或者函數調用等操作，最終這串東西是有一個值的，這就是表達式。

Sass中數據類型有字符串、數值、顏色、列表、布爾值這幾種類型，是的，好像和我們編程語言如JS、Java等的數據類型不太一樣，尤其是關于顏色。

Sass的字符串類型分為有引號字符串和無引號字符串：

有引號字符串：可以包含除"外的任何字符

無引號字符串：不能以數字或者特殊字符開頭，也不能包含空格以及一些特殊字符，如*或者&等。

Sass還將另外幾個特殊構造看成字符串，如!important，url()值，但url($val)不是，因為它含有變量。

最常用的字符串操作符是+——用于拼接字符串，至于拼接的結果是否帶引號，由拼接的左邊的字符串決定。由于歷史原因，-和/也會拼接，但是操作符本身也會被包含在結果字符串中。

在Sass和css中，數值包括兩部分：實際的數字以及（可選的）單位，如px、em、%等。當對含有單位的數值做乘除時，單位也遵循科學運算，如：5em 4px = 20empx。

數值可以進行+、-、*、/和%運算。

因為/在CSS中也被用來分隔值，所以針對/運算有以下規則：

如果兩個值中有任意一個是字符串，結果將是一個普通的正斜杠，也就是變成拼接字符串的操作并且/字符被包含在結果中

以下任一情況滿足，都將進行除法運算：

在/的任意一邊使用一個變量

整個值被括號包圍

該值被用作其他算術表達式的一部分

顏色值有幾種表達方式，這些表達從顏色構成的不同角度進行描述：

以#開頭的十六進制法，一共6位十六進制數表示，每兩位十六進制數依次表示Red、Green、Blue這3個通道的成分多少，從00到ff；

以rgb()或rgba()函數描述的顏色，依次傳入R、G、B這3個通道的顏色成分，從0到255，對于rgba()最后還傳入一個alpha通道，表示不透明度，0表示完全透明，1表示完全不透明；

以hsl()或hsla()函數描述的顏色，依次傳入色相、飽和度和明度，后者也有一個alpha通道參數；

命名好的顏色，比如white、gray等。

列表，是一個數據的序列，用空格或者逗號隔開，你可以理解為數組。列表可以包含其他列表（是不是像二維數組、多維數組），常見的是用逗號隔開的列表中加入用空格隔開的列表，比如a b, c d, e f，也可以用括號來嵌套同類型的其他列表。

列表的用處一般有兩個，一是它使用@each指令遍歷時，代碼更簡潔；二是可以用它將更加復雜的參數傳遞給混合器。

布爾值主要用于Sass的分支結構中判斷使用，布爾值的操作符有and、or和not，就是與或非。

此外比較操作符<、<=、>、>=只能作用于數字，但是==可作用于所有類型，這些操作符返回布爾值。

Sass的內置函數（尤其是顏色函數）能幫我們計算很多內容，我們也不需要立即掌握每一個函數，只需要明白Sass的函數能幫我們做哪些事，到時查文檔即可。

Sass函數，和諸如rgb（）這樣的CSS函數類似，被看做Sass表達式的一部分，返回Sass值（即上面講的幾種類型）。調用時，可以用$name: value的形式指定參數，從而可以不按照順序傳入參數。

取整

ceil($number): 向上取整

round($number): 最接近的整數，四舍五入

floor($number): 向下取整

其他可能用到的函數

abs($number): 取絕對值

comparable($number_1, $number_2): 返回兩個值能否比較

unit($number)和unitless($number): 前者返回數值單位，后者返回是否有單位

顏色函數分為兩部分，一部分用于返回顏色的具體信息，另一部分用于將一個舊的顏色轉化為一個新的顏色值。

返回顏色信息的函數常用的有：

alpha($color)或者opacity($color): 返回$color的alpha通道，也就是不透明度

red($color)、green($color)、blue($color): 返回顏色對應的R、G、B通道，所以會返回0-255的值

hue($color)、saturation($color)、lightness($color): 返回顏色對應的色相（0-359deg）、飽和度（百分比）和明度（百分比）

最綜合的兩個顏色轉換函數: adjust($color, ...)和scale($color, ...)。

adjust($color, ...): 接收一個顏色作為第一個參數，后面的參數是一列描述如何轉換的關鍵字，比如adjust($color, $red: 20, $alpha: -0,5)將$color的紅色成分增加20，不透明度減少0.5

scale($color, ...): 接收一個顏色作為第一個參數，但是和上面的區別在于，它不接受固定的數值，而是以百分比的方式調節，但是不支持$hue的調節，因為色相是一個環，用百分比調節沒有意義

只要任何一個函數中的參數不同時屬于RGB和HSL成分，兩個函數就能接受任意多個參數進行調節從而轉換出新的顏色。

最混的顏色函數：mix($color_1, $color_2, [$weight])。

這個函數將兩種顏色混合在一起，可選一個參數$weight越接近100%，使用前一種顏色的成分更多，此外這個函數還受兩個顏色的透明度影響，透明度越小的顏色對結果的影響越大。

常用的單因素顏色轉換函數：比如lighten()、darken()、saturate()、desaturate()，看這些函數的名字就知道這些函數是用來做什么的了，上面幾個函數都接受一個顏色作為第一個參數，然后接受一個百分比用于調節，依次是增加亮度、降低亮度、增加飽和度、降低飽和度。

方便的特殊顏色轉換函數：grayscale($color)將飽和度降為0，從而轉化為灰度；complement($color)將色度旋轉180度，獲取原來顏色的補色；invert($color)將顏色反相。

nth($list, $n): 返回列表中的某一項，從1開始計數

join($list1, $list2, [$separator]): 拼接兩個列表， 可選的分隔符參數決定最后列表的分割方式（逗號或者空格）

length($list): 返回列表中的項目數

type-of($value): 返回一個無符號字符串，代表值的類型

if($condition, $if-true, $if-false): 根據第一個參數的布爾值，決定返回第二個還是第三個參數，和我們在其他變成語言中用的?:三目運算符類似

可以在選擇器和屬性名的任何一個地方將一個表達式包裹在#{和}之間，表達式的結果將會在CSS輸出結果中代替#{...}。

比如，我們可以利用插值構建一個混合器

@mixin thing($class, $prop){
    .thing.#{$class} {
        prop-#{$prop}: val;
    }
}

Sass可以有循環和分支的結構控制指令，和我們在其他編程語言中看到的差不多，只是它有自己的寫法，這里僅介紹@for、@each、@if。

語法有兩種：

@for $i from 1 to 5 {...}：這樣跳出循環后，i停留在4

@for $i through 5 {...}: 這樣跳出循環后，i停留在5

對列表中的每一項使用樣式塊：@each $item in you, me, he {...}

語法：@if condition {...}，和其他的編程語言一樣，可以接任意多個@else if condition {...}塊，最后最多還能接一個@else {...}塊。

Sass的腳本屬性能幫助我們自動化計算和處理很多事情，比如相關數值的計算，你再也不用每次手按計算器計算出一個值然后填到css中，或者再需要修改某個值時，重新計算過所有的新值填上，Sass幫你計算，助你快速修改。

這里面最吸引人的當屬Sass的顏色函數，告別了需要在一些色彩工具中選擇顏色，然后建立配色，修改選色拷貝顏色值再應用看效果的繁瑣過程，甚至當你熟悉了一些顏色理論和色環后，你可以完全在代碼編輯器中憑借代碼就能轉換出你需要的顏色，然后去瀏覽器看效果僅僅是確認你的配色，Sass基于現有的顏色生成其他顏色配色（比如改一改明度、飽和度等），很容易幫助你生成一套還不錯的顏色。

至此，介紹的Sass基本特性和高級腳本特性已經足夠應付生產中大部分的工作了，如果還有其他需要，可以嘗試去翻閱Sass的文檔。當然，如果想要更加“偷懶”，更加方便，那么Sass的框架就可以上場了，接下來我們會聊一下Sass的一個框架——Compass，看它是怎么在Sass的基礎上幫助我們做好我們經常會遇到的一些樣式設計模式的。