sass筆記-4|像寫腳本同樣寫Sass，把能交給Sass辦的都交給它

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

零. 什麼是表達式

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

一. 數據類型

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

1. 字符串

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

• 有引號字符串：能夠包含除"外的任何字符

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

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

最經常使用的字符串操做符是+——用於拼接字符串，至於拼接的結果是否帶引號，由拼接的左邊的字符串決定。因爲歷史緣由，-和/也會拼接，可是操做符自己也會被包含在結果字符串中。

2. 數值

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

數值能夠進行+、-、*、/和%運算。

由於/在CSS中也被用來分隔值，因此針對/運算有如下規則：

• 若是兩個值中有任意一個是字符串，結果將是一個普通的正斜槓，也就是變成拼接字符串的操做而且/字符被包含在結果中

• 如下任一狀況知足，都將進行除法運算：

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

  • 整個值被括號包圍

  • 該值被用做其餘算術表達式的一部分

3. 顏色

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

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

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

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

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

4. 列表

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

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

5. 布爾值

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

此外比較操做符<、<=、>、>=只能做用於數字，可是==可做用於全部類型，這些操做符返回布爾值。

二. 函數——Sass的一大亮點

Sass的內置函數（尤爲是顏色函數）能幫咱們計算不少內容，咱們也不須要當即掌握每個函數，只須要明白Sass的函數能幫咱們作哪些事，到時查文檔便可。

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

1. 數值處理常見函數

取整

• ceil($number): 向上取整

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

• floor($number): 向下取整

其餘可能用到的函數

• abs($number): 取絕對值

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

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

2. 獲取顏色信息的函數

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

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

• 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）、飽和度（百分比）和明度（百分比）

3. 轉換顏色的函數

最綜合的兩個顏色轉換函數: 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)將顏色反相。

4. 列表函數

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

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

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

5. 其餘有用的sass函數

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

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

三. 插值

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

好比，咱們能夠利用插值構建一個混合器

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

四. 結構控制指令

Sass能夠有循環和分支的結構控制指令，和咱們在其餘編程語言中看到的差很少，只是它有本身的寫法，這裏僅介紹@for、@each、@if。

1. @for

語法有兩種：

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

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

2. @each

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

3. @iF

語法：@if condition {...}，和其餘的編程語言同樣，能夠接任意多個@else if condition {...}塊，最後最多還能接一個@else {...}塊。

五. 小結

Sass的腳本屬性能幫助咱們自動化計算和處理不少事情，好比相關數值的計算，你不再用每次手按計算器計算出一個值而後填到css中，或者再須要修改某個值時，從新計算過全部的新值填上，Sass幫你計算，助你快速修改。

這裏面最吸引人的當屬Sass的顏色函數，告別了須要在一些色彩工具中選擇顏色，而後創建配色，修改選色拷貝顏色值再應用看效果的繁瑣過程，甚至當你熟悉了一些顏色理論和色環後，你能夠徹底在代碼編輯器中憑藉代碼就能轉換出你須要的顏色，而後去瀏覽器看效果僅僅是確認你的配色，Sass基於現有的顏色生成其餘顏色配色（好比改一改明度、飽和度等），很容易幫助你生成一套還不錯的顏色。

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