摘要：，返回的最大值。非相同的單位，報(bào)錯(cuò)編譯為，返回一個(gè)隨機(jī)數(shù)。函數(shù)函數(shù)稱為三元條件函數(shù)，主要因?yàn)樗椭械娜袛喾浅５南嗨啤ｎ伾瘮?shù)暫時(shí)還沒用到過。函數(shù)，根據(jù)三個(gè)值創(chuàng)建一個(gè)顏色將一個(gè)顏色根據(jù)透明度轉(zhuǎn)換成顏色。

前戲：前幾篇文章其實(shí)都是些基礎(chǔ)必備的，什么變量、繼承、占位符、混合宏...這回來高級(jí)點(diǎn)的，玩玩Sass 自帶的一些函數(shù)...有字符串函數(shù)(String Functions)、數(shù)字函數(shù)(Number Functions)、列表函數(shù)(List Functions)、顏色函數(shù)(Color Functions)、Introspection 函數(shù)(Introspection Functions)、三元函數(shù)(Miscellaneous Function)

quote($string)給$string前后添加引號(hào)。

//SCSS：
p:after{
  content: quote(hello +" "+ sass); 
  //中間有空格(其他特殊符號(hào))需要拼字符串；quote(hello sass); 直接這樣會(huì)報(bào)錯(cuò)；
}
p:before{
  content: quote("This"s" + " " + "bug");
  //如果$string本身就帶有引號(hào)，則會(huì)統(tǒng)一換成雙引號(hào)`""`;
}

//編譯為：
p:after { content: "hello sass"; }
p:before { content: "This"s bug"; }

unquote($string) 刪除 $string 前后的引號(hào)。

//SCSS：
p:after{
  content: unquote("This"s bug"); //中間的引號(hào)未被刪除;
}
p:before{
  content: unquote(Thissbug);
  //如$string本身就不帶引號(hào)，則返回$string本身;
}

//編譯為：
p:after { content: This"s bug; }
p:before { content: sass; }

其實(shí)吧！這倆玩意在項(xiàng)目中我還真沒用到過！

str-length($string) 返回 $string 的長度。

//SCSS：
p:before { content: str-length("hello sass!"); }

//編譯為：
p:before { content: 11; }

to-upper-case($string) 將$string小寫字母轉(zhuǎn)成大寫字母。

//SCSS：
p:before { content: to-upper-case("hello sass!"); }

//編譯為：
p:before { content: "HELLO SASS!"; }

to-lower-case($string) 將$string大寫字母轉(zhuǎn)成小寫字母。

//SCSS：
p:before { content: to-lower-case("HELLO SASS!"); }

//編譯為：
p:before { content: "hello sass!"; }

percentage($number) 將一個(gè)不帶單位的數(shù)值轉(zhuǎn)成百分比。

//SCSS：
.box{ width: percentage(.5)}
.box2{ width: percentage(.1rem / .3rem)}

經(jīng)測(cè)試，兩個(gè)相同的單位，除了用除法 "/" 其他+-%均會(huì)報(bào)錯(cuò)，且用除法 "/" 也只能在兩個(gè)相同類型的單位之間進(jìn)行運(yùn)算；*

//編譯為：
.box { width: 50%; }
.box2 { width: 33.33333%; }

round($number) 將$number 四舍五入為整數(shù)，$number可帶單位。

//SCSS：
.xs-row{ width: round(33.33333333333333px)}

//編譯為：
.xs-row { width: 33px; }

ceil($number) 大于 $number ，向上取整。

//SCSS
.fs14{ font-size: ceil(13.1px)}
.fs16{ font-size: ceil(15.9px)}

//編譯為：
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }

與 ceil()相反，floor($number) 去除 $number 小數(shù)，向下取整。

//SCSS：
.fs14{ font-size: floor(14.1px) }
.fs16{ font-size: floor(16.9px) }

//編譯為：
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }

abs($number)，返回 $number 的絕對(duì)值。

//SCSS：
.fs16{ font-size: abs(-1.6rem) }
.fs18{ font-size: abs(1.8rem) }

//編譯為：
.fs16{ font-size: 1.6rem; }
.fs18{ font-size: 1.8rem; }

min($numbers…)，返回 $number... 的最小值。
max($numbers…)，返回 $number... 的最大值。

//SCSS：
div{ width: min(2rem, 10rem) }
div{ width: max(2rem, 10rem) }
div{ width: max(2px, 10rem) } //非相同的單位，報(bào)錯(cuò)

//編譯為：
div { width: 2rem; }
div { width: 10rem; }
Incompatible units: "rem" and "px"

random([$limit])，返回一個(gè)隨機(jī)數(shù)。

//SCSS：
div {
    height: random(); //直接調(diào)用
    width: random(666); //傳個(gè)參
}
//編譯為：
div {
  height: 0.3649;
  width: 403;
}

常用

length($list)，返回 $list 的長度值；
nth($list, $n)，返回 $list 中指定的某個(gè) $n，且 $n必須是大于0的整數(shù)；
Javascript的Array()的索引是從0開始的，厄...有點(diǎn)扯遠(yuǎn)了，用過 css3 的 :nth-child(n)都應(yīng)該知道啦，索引下標(biāo)也是從1開始的，So.....

//SCSS：
$list: google, baidu, sogo;
@for $i from 1 through length($list){ //取$list的length并循環(huán)輸出；
  .icon-#{nth($list, $i)}{ //$list中的某個(gè)索引值；
    content: "#{nth($list, $i)}"
  }
}

//編譯為：
.icon-google { content: "google"; }
.icon-baidu { content: "baidu"; }
.icon-sogo { content: "sogo"; }

join($list1, $list2, [$separator]) 將兩個(gè)列表給連接在起來，組成一個(gè)列表；
$separator 默認(rèn)值是 auto，另外還有 comma 和 space 兩個(gè)值，其中 comma 值指定列表中的列表項(xiàng)值之間使用逗號(hào) , 隔開，space 值指定列表中的列表項(xiàng)值之間使用 空 格 分隔。

join((blue, red), (#abc, #def), space) => blue red #abc #def //space
join(10px, 20px, comma) => 10px, 20px //comma

Examples:

//SCSS：
$list1: google, baidu, sogo;
$list2: facebook, instagram, twitter;
$list3: join($list1, $list2); //講真啦，很少用到j(luò)oin()，反正我是很少用到;
@for $i from 1 through length($list3){
  .icon-#{nth($list3, $i)}{
    content: "#{nth($list3, $i)}"
  }
}

//編譯為：
.icon-google { content: "google"; }
.icon-baidu { content: "baidu"; }
.icon-sogo { content: "sogo"; }
.icon-facebook { content: "facebook"; }
.icon-instagram { content: "instagram"; }
.icon-twitter { content: "twitter"; }

index($list, $value)，返回 $list 中的 $value所在的位置。

index(1px solid red, solid) => 2
index(1px solid red, dashed) => null
index((width: 10px, height: 20px), (height 20px)) => 2

list-separator($list)，返回 $list 中的分隔符。

list-separator(1px 2px 3px) => space
list-separator(1px, 2px, 3px) => comma
list-separator("foo") => space

type_of($value) 返回 $value 的類型。

type-of(abc)   => string
type-of("abc") => string
type-of(true)   => bool
type-of(#fff)   => color
type-of(green)   => color

unit($number) 返回 $number 所使用的單位。

unit(100) => ""
unit(100px) => "px"
unit(3em) => "em"
unit(10px * 5em) => "em*px"
unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"

unitless($number) 返回 $number 是否帶有單位；如果不帶單位返回值為 true，帶單位返回值為 false。

unitless(100) => true
unitless(100px) => false

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

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

當(dāng) $condition 條件為真，則返回 $if-true 值，否則返回 $if-false值。

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

暫時(shí)還沒用到過。

rgb($red, $green, $blue)，根據(jù)$red、$green、$blue三個(gè)值創(chuàng)建一個(gè)顏色；
rgba($red, $green, $blue, $alpha),將一個(gè)顏色根據(jù)透明度轉(zhuǎn)換成 rgba 顏色。

rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2)    => rgba(0, 0, 255, 0.2)

Sass::Script::Functions — Sass Documentation

結(jié)語：既然你都看到這里了，我就說說吧，這些個(gè)函數(shù)其實(shí)也就在自己寫插件的時(shí)候有用，其他時(shí)候可能會(huì)有些大材小用。