Sass基本語法 - 常用函數

字符串函數

unquote($string)：刪除字符串中的引號；

unquote( ) 函數只能刪除字符串最前和最後的引號（雙引號或單引號），而無法刪除字符串中間的引號。如果字符沒有帶引號，返回的將是字符串本身。
quote($string)：給字符串添加引號。

quote() 函數只能給字符串增加雙引號，而且字符串中間有單引號或者空格時，需要用單引號或雙引號括起，否則編譯的時候將會報錯。
To-upper-case()：函數將字符串小寫字母轉換成大寫字母
To-lower-case()：函數與 To-upper-case() 剛好相反，將字符串轉換成小寫字母

數字函數

Sass 中的數字函數提要針對數字方面提供一系列的函數功能：

percentage($value)：將一個不帶單位的數轉換成百分比值；
round($value)：將數值四捨五入，轉換成一個最接近的整數；（四捨五入）
ceil($value)：將大於自己的小數轉換成下一位整數；（向上取整）
floor($value)：將一個數去除他的小數部分；（向下取整）
abs($value)：返回一個數的絕對值；（絕對整數）
min($numbers…)：找出幾個數值之間的最小值；（min（1，2，3））
max($numbers…)：找出幾個數值之間的最大值；
random(): 獲取隨機數（random（））

列表函數

列表函數主要包括一些對列表參數的函數使用，主要包括以下幾種：

length($list)：返回一個列表的長度值；===length(border 1px solid)===3
nth($list, $n)：返回一個列表中指定的某個標籤值===nth(border 1px solid,1)===border
join($list1, $list2, [$separator])：將兩個列給連接在一起，變成一個列表；===

    join(10px 20px, 30px 40px)
    (10px 20px 30px 40px)

    join((blue,red),(#abc,#def))
    (#0000ff, #ff0000, #aabbcc, #ddeeff)

    join((blue,red),(#abc #def))
    (#0000ff, #ff0000, #aabbcc, #ddeeff)

append($list1, $val, [$separator])：將某個值放在列表的最後；

    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 參數值，其默認值是 auto。

如果列表只有一個列表項時，那麼插入進來的值將和原來的值會以空格的方式分隔。

如果列表中列表項是以空格分隔列表項，那麼插入進來的列表項也將以空格分隔；

如果列表中列表項是以逗號分隔列表項，那麼插入進來的列表項也將以逗號分隔。

zip($lists…)：將幾個列表結合成一個多維的列表；（每個單一的列表個數值必須是相同的）

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

zip()函數中每個單一列表的值對應的取其相同位置值：

|--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---|
|------------|--------------|--------------|--------------|
|    List1   |      1px     |      2px     |      3px     |
|------------|--------------|--------------|--------------|
|    List2   |      solid   |      dashed  |     dotted   |
|------------|--------------|--------------|--------------|
|    List3   |      green   |      blue    |      red     |
|------------|--------------|--------------|--------------|

index($list, $value)：返回一個值在列表中的位置值。

index(1px solid red,dotted) //列表中沒有找到 dotted
false
index(1px solid red,solid) //列表中找到 solid 值，並且返回他的位置值 2
2

Introspection 函數

Introspection 函數包括了幾個判斷型函數：

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

number 為數值型。
string 為字符串型。
bool 為布爾型。
color 為顏色型。

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

碰到複雜的計算時，其能根據運算得到一個「多單位組合」的值，不過只充許乘、除運算：

但加、減碰到不同單位時，unit() 函數將會報錯，除 px 與 cm、mm 運算之外
comparable($number-1, $number-2)：判斷兩個值是否可以做加、減和合併

Miscellaneous 函數

Miscellaneous 函數稱為三元條件函數，主要因為他和 JavaScript 中的三元判斷非常的相似。他有兩個值，當條件成立返回一種值，當條件不成立時返回另一種值：

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

上面表達式的意思是當 $condition 條件成立時，返回的值為 $if-true，否則返回的是 $if-false 值。

if(true,1px,2px)
1px
if(false,1px,2px)
2px

顏色函數

RGB 顏色函數簡介

RGB 顏色只是顏色中的一種表達式，其中 R 是 red 表示紅色，G 是 green 表示綠色而 B 是 blue 表示藍色。在 Sass 中為 RGB 顏色提供六種函數：

rgb($red,$green,$blue)：根據紅、綠、藍三個值創建一個顏色；
rgba($red,$green,$blue,$alpha)：根據紅、綠、藍和透明度值創建一個顏色；
red($color)：從一個顏色中獲取其中紅色值；
green($color)：從一個顏色中獲取其中綠色值；
blue($color)：從一個顏色中獲取其中藍色值；
mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。[$weight]是合併的比例

HSL 函數簡介

hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創建一個顏色；
hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創建一個顏色；
hue($color)：從一個顏色中獲取色相（hue）值；
saturation($color)：從一個顏色中獲取飽和度（saturation）值；
lightness($color)：從一個顏色中獲取亮度（lightness）值；
adjust-hue($color,$degrees)：通過改變一個顏色的色相值，創建一個新的顏色；
lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，創建一個新的顏色；
darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創建一個新的顏色；
saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創建一個新的顏色
desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創建出一個新的顏色；
grayscale($color)：將一個顏色變成灰色，相當於desaturate($color,100%);
complement($color)：返回一個補充色，相當於adjust-hue($color,180deg);
invert($color)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。

Opacity 函數簡介

alpha($color) /opacity($color)：獲取顏色透明度值；
rgba($color, $alpha)：改變顏色的透明度值；
opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明；
transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明。