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

Sass筆記關(guān)于sass的基礎(chǔ)部分已經(jīng)寫完，這一篇介紹Sass的高級(jí)特性——腳本特性。Sass能做很多事讓樣式表更智能，我們先會(huì)看到Sass眼中的數(shù)據(jù)類型，在這些數(shù)據(jù)類型上會(huì)有可進(jìn)行的操作，此外，Sass中的內(nèi)置函數(shù)（尤其是顏色函數(shù)）能幫你自動(dòng)計(jì)算很多東西，sass還有自己一套控制結(jié)構(gòu)語法，能實(shí)現(xiàn)循環(huán)或者分支，這一切都賦予了sass腳本的特性。

只要能放在屬性右邊的都是表達(dá)式，常見的，表達(dá)式是一個(gè)簡(jiǎn)單的值，但表達(dá)式也可以包含數(shù)學(xué)運(yùn)算符，表達(dá)式可以出現(xiàn)在屬性或者變量值中的任何地方。最直白的理解是，表達(dá)式是一串東西，這串東西中包含了運(yùn)算或者函數(shù)調(diào)用等操作，最終這串東西是有一個(gè)值的，這就是表達(dá)式。

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

Sass的字符串類型分為有引號(hào)字符串和無引號(hào)字符串：

有引號(hào)字符串：可以包含除"外的任何字符

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

Sass還將另外幾個(gè)特殊構(gòu)造看成字符串，如!important，url()值，但url($val)不是，因?yàn)樗凶兞俊?/p>

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

在Sass和css中，數(shù)值包括兩部分：實(shí)際的數(shù)字以及（可選的）單位，如px、em、%等。當(dāng)對(duì)含有單位的數(shù)值做乘除時(shí)，單位也遵循科學(xué)運(yùn)算，如：5em 4px = 20empx。

數(shù)值可以進(jìn)行+、-、*、/和%運(yùn)算。

因?yàn)?b>/在CSS中也被用來分隔值，所以針對(duì)/運(yùn)算有以下規(guī)則：

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

以下任一情況滿足，都將進(jìn)行除法運(yùn)算：

在/的任意一邊使用一個(gè)變量

整個(gè)值被括號(hào)包圍

該值被用作其他算術(shù)表達(dá)式的一部分

顏色值有幾種表達(dá)方式，這些表達(dá)從顏色構(gòu)成的不同角度進(jìn)行描述：

以#開頭的十六進(jìn)制法，一共6位十六進(jìn)制數(shù)表示，每?jī)晌皇M(jìn)制數(shù)依次表示Red、Green、Blue這3個(gè)通道的成分多少，從00到ff；

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

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

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

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

列表的用處一般有兩個(gè)，一是它使用@each指令遍歷時(shí)，代碼更簡(jiǎn)潔；二是可以用它將更加復(fù)雜的參數(shù)傳遞給混合器。

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

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

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

Sass函數(shù)，和諸如rgb（）這樣的CSS函數(shù)類似，被看做Sass表達(dá)式的一部分，返回Sass值（即上面講的幾種類型）。調(diào)用時(shí)，可以用$name: value的形式指定參數(shù)，從而可以不按照順序傳入?yún)?shù)。

取整

ceil($number): 向上取整

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

floor($number): 向下取整

其他可能用到的函數(shù)

abs($number): 取絕對(duì)值

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

unit($number)和unitless($number): 前者返回?cái)?shù)值單位，后者返回是否有單位

顏色函數(shù)分為兩部分，一部分用于返回顏色的具體信息，另一部分用于將一個(gè)舊的顏色轉(zhuǎn)化為一個(gè)新的顏色值。

返回顏色信息的函數(shù)常用的有：

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

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

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

最綜合的兩個(gè)顏色轉(zhuǎn)換函數(shù): adjust($color, ...)和scale($color, ...)。

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

scale($color, ...): 接收一個(gè)顏色作為第一個(gè)參數(shù)，但是和上面的區(qū)別在于，它不接受固定的數(shù)值，而是以百分比的方式調(diào)節(jié)，但是不支持$hue的調(diào)節(jié)，因?yàn)樯嗍且粋€(gè)環(huán)，用百分比調(diào)節(jié)沒有意義

只要任何一個(gè)函數(shù)中的參數(shù)不同時(shí)屬于RGB和HSL成分，兩個(gè)函數(shù)就能接受任意多個(gè)參數(shù)進(jìn)行調(diào)節(jié)從而轉(zhuǎn)換出新的顏色。

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

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

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

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

nth($list, $n): 返回列表中的某一項(xiàng)，從1開始計(jì)數(shù)

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

length($list): 返回列表中的項(xiàng)目數(shù)

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

if($condition, $if-true, $if-false): 根據(jù)第一個(gè)參數(shù)的布爾值，決定返回第二個(gè)還是第三個(gè)參數(shù)，和我們?cè)谄渌兂烧Z言中用的?:三目運(yùn)算符類似

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

比如，我們可以利用插值構(gòu)建一個(gè)混合器

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

Sass可以有循環(huán)和分支的結(jié)構(gòu)控制指令，和我們?cè)谄渌幊陶Z言中看到的差不多，只是它有自己的寫法，這里僅介紹@for、@each、@if。

語法有兩種：

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

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

對(duì)列表中的每一項(xiàng)使用樣式塊：@each $item in you, me, he {...}

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

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

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

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