＞Introspection（）函數：主要用來對值做一個判斷。

今日將介紹４種 Introspection（）函數：
１. type-of() 函數
２. unit()函數
３. unitless()函數
４. comparable()函數

1.type-of() 函數

判斷一個值是屬於什麼類型。

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

// scss //
$width1: type-of(100px);
div{
    width: $width1;
}

$width2: type-of(one);
div{
    width: $width2;
}

$width3: type-of(true);
div{
    width: $width3;
}

$width4: type-of(#ff8493);
div{
    width: $width4;
}

編｜
譯｜ 從 $width1 得知加上單位也是可被讀取的。
後｜
　Ｖ

// css //
div {
  width: number;
}

div {
  width: string;
}

div {
  width: bool;
}

div {
  width: color;
}

2.unit()函數

輸出一個數值的單位。

多種不同單位只限乘除。

例如：

// scss //
$width1: unit(100);
div{
    width: $width1;
}

$width2: unit(100em);
div{
    width: $width2;
}

$width3:  unit(100px + 100px); // 加減需【同單位】 //
div{
    width: $width3;
}

$width4:  unit(100em - 100em); // 加減需【同單位】 //
div{
    width: $width4;
}

$width5: unit(100px * 100in); // 乘除可【不同單位】 //
div{
    width: $width5;
}

$width6: unit(100em / 100cm); // 乘除可【不同單位】 //
div{
    width: $width6;
}

編｜
譯｜ 從 $width1 得知無單位數值輸出為空格。
後｜
　Ｖ

// css //
div {
  width: "";
}

div {
  width: "em";
}

div {
  width: "px";
}

div {
  width: "em";
}

div {
  width: "px*in";
}

div {
  width: "em/cm";
}

多種不同單位不限加減

例如：

// scss //
$width7: unit(100px + 100em);
div{
    width: $width7;
}

$width8: unit(100cm - 100in);
div{
    width: $width8;
}

編｜
譯｜ 加減不同單位時無法被讀取。
後｜
　Ｖ

Compilation Error
Error: 100px and 100em have incompatible units.

Compilation Error
Error: 100cm and 100in have incompatible units.

3.unitless()函數

判斷一個數值是否帶有單位。若不帶單位返回的值為true，帶單位返回的值為false。

例如：

// scss //
$width1: unitless(100);
div{
    width: $width1;
}

$width2: unitless(100em);
div{
    width: $width2;
}

$width3:  unitless(100px + 100px);
div{
    width: $width3;
}

$width4:  unitless(100em - 100);
div{
    width: $width4;
}

$width5: unitless(100 * 100);
div{
    width: $width5;
}

$width6: unitless(100em / 100px);
div{
    width: $width6;
}

編｜
譯｜
後｜
　Ｖ

// css //
div {
  width: true;
}

div {
  width: false;
}

div {
  width: false;
}

div {
  width: false;
}

div {
  width: true;
}

div {
  width: false;
}

4.comparable()函數

判斷兩個數是否可以進行加，減以及合併。
若可以返回的值為true，如果不可以返回的值是false。

例如：

// scss //
$width1: comparable(100px,100px);
div{
    width: $width1;
}

$width2: comparable(100em,100%);
div{
    width: $width2;
}

編｜
譯｜ 從 width2 得知不同單位時返回false。
後｜
　Ｖ

// css //
div {
  width: true;
}

div {
  width: false;
}

Miscellaneous（）函數

＞又稱為三元條件函數。
＞語法：if($condition,$if-true,$if-false)
＞當$condition條件成立時，成立時返回的值為$if-true，不成立時返回的是$if-false值。

例如：

// scss //
$width1: if(true,10px,99em);
div{
    width: $width1;
}

$width2: if(false,10px,99em);
div{
    width: $width2;
}

編｜
譯｜ 從 width1 得知當條件為true，輸出結果為第一個值。
後｜ 從 width2 得知當條件為false，輸出結果為第二個值。
　Ｖ

// css //
div {
  width: 10px;
}

div {
  width: 99em;
}