scss-函數

　　在scss中除了可以定義變量，具有@extend和@mixins等特性之外，還自備了一系列的函數功能。

　　scss本身帶有大量的內置函數，具體可以參閱官網函數模塊。

 

　　一、字符串函數

• unquote($string)：只能刪除字符串最前和最后的引號（雙引號或單引號），而無法刪除字符串中間的引號。如果字符沒有帶引號，返回的將是字符串本身。
• quote($string)：只能給字符串增加雙引號，而且字符串中間有單引號或者空格時，需要用單引號或雙引號括起，否則編譯的時候將會報錯。

 

　　二、數字函數

• percentage($value)：將一個不帶單位的數轉換成百分比值，如果轉換的值是一個帶有單位的值，那么在編譯的時候會報錯誤信息：
• round($value)：將數值四舍五入，轉換成一個最接近的整數，可以攜帶單位的任何數值。
• ceil($value)：將大於自己的小數轉換成下一位整數；將一個數轉換成最接近於自己的整數，會將一個大於自身的任何小數轉換成大於本身1的整數。也就是只做入，不做舍的計算
• floor($value)：將一個數去除他的小數部分；floor()函數剛好與ceil()函數功能相反，其主要將一個數去除其小數部分，並且不做任何的進位。也就是只做舍，不做入的計算
• abs($value)：返回一個數的絕對值；
• min($numbers…)：找出幾個數值之間的最小值；
• max($numbers…)：找出幾個數值之間的最大值。

 

　　三、List函數

• length($list)：返回一個列表的長度值；
• nth($list, $n)：返回一個列表中指定的某個標簽值
• join($list1, $list2, [$separator])：將兩個列給連接在一起，變成一個列表；
• append($list1, $val, [$separator])：將某個值放在列表的最后；
• zip($lists…)：將幾個列表結合成一個多維的列表；
• index($list, $value)：返回一個值在列表中的位置值。

　　四、自定義函數

　　可能有時候，內置的函數並不能夠完全滿足我們的需求，那么我們也自定義函數。

　　語法：

@function function-name($args) { 
  @return value-to-be-returned; 
}

　　@function開頭聲明一個函數，函數內部使用@return返回一個值，參數可以省略。總體來講scss中的函數和JavaScript中的函數大同小異，並且具備某些ES2015函數的特點。函數可以放置在想要使用函數返回值的地方，scss代碼實例如下

div { 
  font-size: font-size($args); 
}

　　特別說明:scss函數名中的中划線和下划線是等同的，font-size和font_size指向同一個函數。

@function column-width($col, $total) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(3, 8); 
}

　　編譯后的css代碼如下：

.col-3 {
  width: 37.5%;
}

　　默認參數:scss代碼實例如下:

@function column-width($col:3, $total:8) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(); 
}

　　參數名稱后面跟着一個冒號，冒號后面就是規定的默認參數值；函數調用時，對應的參數沒有傳遞值，那么就使用默認參數值，上面代碼編譯結果如下:

.col-3 {
  width: 37.5%;
}

　　再來看一段scss代碼實例:

@function column-width($col:3, $total) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(4); 
}

　　上面的代碼會報錯，函數調用時只傳遞了一個參數，但是函數聲明時規定了兩個參數，並且第二個參數沒有默認值，也就是說函數調用時所傳遞的參數必須和聲明時規定的參數對應起來。

　　

@function column-width($col:3, $total:8) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(4); 
}

　　傳遞的參數會覆蓋默認的參數，所以4會覆蓋3，第二個參數使用默認值。編譯結果如下:

.col-3 {
  width: 50%;
}

　　函數rest參數:

　　給函數傳遞的參數個數也許不是固定的，或者不能預知為函數傳遞參數的個數。代碼實例如下:

@function column-width($index, $widths...){ 
  @return nth($widths, $index); 
}
.col-3 { 
  width: column-width(3, 25%, 50%, 75%, 100%); 
}

　　rest參數的形式是參數名稱后面跟三個點。上面代碼中，3會傳遞給$index，后面的剩余參數會都傳遞給$widths（$widths生成一個list列表）。nth()是一個內置函數，可以從列表中找到對應索引的值（索引是從1開始的，與大多數編程語言從0開始不同）。上面代碼編譯結果如下:

.col-3 {
  width: 75%;
}

 　　文本超出范圍，顯示省略號

/*文本格式化，超出范圍，顯示省略號*/
@mixin text-overflow($width:100%,$display:block) {
  width: $width;
  display: $display;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}

　　調用@include text-overflow();也可以自己傳入參數，display為block或inline-block才能達到預期的效果

　　編譯的css代碼如下：

    width: 100%;
    display: block;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;