1.1 Sass/Scss函數 -- 數字

原文鏈接:https://sass-lang.com/documentation/functions/math

 

目錄

abs($number) 絕對值

ceil($number) 向高位取整

comparable($number,$number2) 判斷單位

floor($number) 向低位取整

max($number...) 取最大值

min($number...) 取最小值

percentage($number) 轉換爲百分比

random($limit:null)  生成隨機數

round($number) 四捨五入

unit($number) 取單位

unitless($number)


  • abs($number) 絕對值

說明:取變量的絕對值,可以包含單位。

返回類型:number

@debug abs(-10);   // 10
@debug abs(-10in); // 10in
@debug abs(-10px); // 10px
  • ceil($number) 向高位取整

說明:把數值中的小數捨去,取下一個整數。

返回類型:number

@debug ceil(4); // 4
@debug ceil(4.2); // 5
@debug ceil(4.9); // 5
  • comparable($number,$number2) 判斷單位

說明:判斷$number和$number2是否有同類型的單位,例如px和px,cm和mm等。如果返回true,這兩個變量可以相加、相減、比較,否則對$number和$number2進行上述運算時會報錯。

返回類型:boolean

@debug comparable(2px, 1px); // true
@debug comparable(100px, 3em); // false
@debug comparable(10cm, 3mm); // true
  • floor($number) 向低位取整

說明:把數值中的小數捨去。

返回類型:number

@debug floor(4); // 4
@debug floor(4.2); // 4
@debug floor(4.9); // 4
  • max($number...) 取最大值

說明:參數中最大的一個數。如果參數是數組,則需要在後面添加...才能執行,不然會報錯

返回類型:number

@debug max(1px, 4px); // 4px

$widths: 50px, 30px, 100px;
@debug max($widths...); // 100px
  • min($number...) 取最小值

說明:參數中最小的一個數。如果參數是數組,則需要在後面添加...才能執行,不然會報錯

返回類型:number

@debug min(1px, 4px); // 1px

$widths: 50px, 30px, 100px;
@debug min($widths...); // 30px
  • percentage($number) 轉換爲百分比

說明:把沒有單位的值轉換爲百分比,通常是0到1的浮點數,帶單位會報錯。此函數和$number * 100%效果是一樣的。

返回類型:number

@debug percentage(0.2); // 20%
$number : 0.2;
@debug $number * 100%;  // 20%
@debug percentage(100px / 50px); // 200%  100px和50px帶單位,但是除法運算後是2,不帶單位
  • random($limit:null)  生成隨機數

說明:生成隨機數。參數$limit默認爲null,爲隨機數最大值。

返回類型:number

如果$limit爲null時,結果介於0與1之間。

@debug random(); // 0.2821251858
@debug random(); // 0.6221325814

如果$limit不爲空時,結果介於1與$limit之間,參數必須大於或等於1,而且爲整數,否則報錯。

@debug random(10); // 4
@debug random(10000); // 5373
  • round($number) 四捨五入

說明:四捨五入(0.5進位操作)

返回類型:number

@debug round(4); // 4
@debug round(4.2); // 4
@debug round(4.9); // 5
  • unit($number) 取單位

說明:獲取參數的單位,字符串形式返回

返回類型:quoted string

注意:這個方法是用於調試的,不保證輸出結果和發佈的一致

@debug unit(100); // ""
@debug unit(100px); // "px"
@debug unit(5px * 10px); // "px*px"
@debug unit(5px / 1s); // "px/s"
  • unitless($number)

說明:判斷$number是否沒有單位

返回類型:boolean

@debug unitless(100); // true
@debug unitless(100px); // false

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章