今日將介紹４種數字函數：
１. percentage()函數
２. round()函數
３. ceil()函數
４. floor()函數

1.percentage()函數

將一個不帶單位的數轉換成百分比形式。

例如：

// scss //
$width1: percentage(.2);
div{
    width: $width1;
}

$width2: percentage(3px/10px);
div{
    width: $width2;
}

$width3: percentage(4em/10em);
div{
    width: $width3;
}

編｜
譯｜
後｜
　Ｖ

// css //
div {
  width: 20%;
}

div {
  width: 30%;
}

div {
  width: 40%;
}

當轉換得值不同單位時，會編譯錯誤。

例如：

// scss //
$width4: percentage(5em/10px);
div{
    width: $width4;
}

編｜
譯｜ em/px 無法被編譯。
後｜
　Ｖ

Compile error - $width4: 0.5em/px is not a unitless number for `percentage' 

2.round()函數

將一個數值四捨五入為一個最接近的整數。

例如：

// scss //
$width1: round(1.4);
div{
    width: $width1;
}

$width2: round(1.9);
div{
    width: $width2;
}

$width3: round(2.825469);
div{
    width: $width3;
}

$width4: round(4%);
div{
    width: $width4;
}

$width5: round(5.4px);
div{
    width: $width5;
}

$width6: round(30em/5);
div{
    width: $width6;
}

$width7: round(3in/39px);
div{
    width: $width7;
}

編｜
譯｜ 從 width7 可得知在 round() 函數中可以攜帶單位的任何數值。
後｜
　Ｖ

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

div {
  width: 2;
}

div {
  width: 3;
}

div {
  width: 4%;
}

div {
  width: 5px;
}

div {
  width: 6em;
}

div {
  width: 7;
}

3.ceil()函數

似無條件進位，當一個大於自身的任何小數轉換成大於本身 1 的整數。

例如：

// scss //
$width1: ceil(1.0);
div{
    width: $width1;
}

$width2: ceil(1.9);
div{
    width: $width2;
}

$width3: ceil(2.025469);
div{
    width: $width3;
}

$width4: ceil(4.0%);
div{
    width: $width4;
}

$width5: ceil(5.0px);
div{
    width: $width5;
}

$width6: ceil(30em/5);
div{
    width: $width6;
}

$width7: ceil(3in/45px);
div{
    width: $width7;
}

編｜
譯｜ 從 width1 可得知 0 永遠不會進位。
後｜
　Ｖ

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

div {
  width: 2;
}

div {
  width: 3;
}

div {
  width: 4%;
}

div {
  width: 5px;
}

div {
  width: 6em;
}

div {
  width: 7;
}

4.floor()函數

似無條件捨去，將一個數值去除其小數部分，並不做任何的進位。

例如：

// scss //
$width1: floor(1.0);
div{
    width: $width1;
}

$width2: floor(1.9);
div{
    width: $width2;
}

$width3: floor(2.025469);
div{
    width: $width3;
}

$width4: floor(4.0%);
div{
    width: $width4;
}

$width5: floor(5.0px);
div{
    width: $width5;
}

$width6: floor(30em/5);
div{
    width: $width6;
}

$width7: floor(3in/45px);
div{
    width: $width7;
}

編｜
譯｜ 從 width2 可得知即使是最大的 9 也永遠不會進位。
後｜
　Ｖ

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

div {
  width: 1;
}

div {
  width: 2;
}

div {
  width: 4%;
}

div {
  width: 5px;
}

div {
  width: 6em;
}

div {
  width: 6;
}