Sass 學習雜記 - Part 5. 函式與運算

Part 5. 函式與運算

在 Sass 中，除了上一章所提到的三大基本觀念外，Sass 提供許多 函式 (Functions) 與 運算 (Operations) 讓原本 CSS 撰寫起來更佳便利。在運算部分，Sass 內建「計算能力」，能處理「加、減、乘、除」的語法，對於排版有很大的幫助。此外，

5.1 函式 (Functions)

Sass/SCSS 中支援許多新的函式，增強原本 CSS 不足的部分。

5.1.1 字串函式 (String Functions)

• unquote($string)：刪除字串中「最外層」的引號 (不論單引號或雙引號)。

    $string1: 'Hello Sass!';
    $content: unquote($string1);
    /* $content: Hello Sass! */
    $string2: "Hello Sass!";
    $content: unquote($string2);
    /* $content: Hello Sass! */
    $string3: "'Hello Sass!'";
    $content: unquote($string3);
    /* $content: 'Hello Sass!' */
    $string4: '"Hello Sass!"';
    $content: unquote($string4);
    /* $content: "Hello Sass!" */
    $string5: Hello Sass!;
    $content: unquote($string5);
    /* $content: Hello Sass! */
  

• quote($string)：增加字串中的「雙引號」，如果字串本身帶有單引號，則直接帶換為雙引號。注意：如果字串中間有單引號或空格時，需要使用「單引號」或「雙引號」刮起來，否則會編譯錯誤。

    $string1: 'Hello Sass!';
    $content: quote($string1);
    /* $content: "Hello Sass!" */
    $string2: "Hello Sass!";
    $content: quote($string2);
    /* $content: "Hello Sass!" */
    $string3: Hello Sass!;
    $content: quote($string3);
    /* $string3: ("Hello" "Sass!") is not a string for `quote') */
    $string4: ' ';
    $content: quote($string4);
    /* $content: " " */
  

  補充

  • Sass 學習雜記 - A3. 字串函式

5.1.3 數學函示 (Math Functions)

• percentage($value)：將一個「單位相同」的數值轉換為百分比。

    $value1: .2;
    $perc: percentage($value1);
    /* $perc: 20% */
    $value2: 2px / 10em;
    $perc: percentage($value2);
    /* $value2: 0.2px/em is not a unitless number for `percentage' */
    $value3: 2em / 10em;
    $perc: percentage($value3);
    /* $perc: 20% */
  

• min($value1, $value2, ...)：由 $value1、$value2、…等「單位相同」的數字中找出最小值。

    $valueList1: 1, 2, 1%, 3, 300%;
    $minValue: min($valueList1);
    /* $minValue: 1% */
    $valueList2: 1px, 2, 3px;
    $minValue: min($valueList2);
    /* $minValue: 1px */
    $valueList3: 1px, 1em;
    $minValue: min($valueList3);
    /* SyntaxError: Incompatible units: 'em' and 'px'. */
    $valueList4: 1em, 2em, 6em;
    $minValue: min($valueList4);
    /* $minValue: 1em */
  

• max($value1, $value2, ...)：由 $value1、$value2、…等「單位相同」的數字中找出最大值。

    $valueList1: 1, 6;
    $maxValue: min($valueList1);
    /* $maxValue: 6 */
    $valueList2: 1, 3px, 6%, 9;
    $maxValue: min($valueList2);
    /* SyntaxError: Incompatible units: '%' and 'px'. */
    $valueList3: 1px, 6px;
    $maxValue: min($valueList3);
    /* $maxValue: 6px */
  

• random($value)：由 1 - $value 隨機產生一個數字，若無給定 $value，則預設為 100。

    $number: random() + px;
    /* $number: random a number from 1 to 100 with px as unit */
    $value: 300;
    $number: random($value) + px;
    /* $number: random a number from 1 to 300 with px as unit */
  

補充

• Sass 學習雜記 - A1. 數學函式

5.1.2 顏色函式 (Color Functions)

• 顏色運算：Sass 支顏色的援數學運算，提供數值上的計算結果。
  • 以下以 顏色運算 作爲說例。

      $color: #010203 + #040506;
    

  • 上述程式中，顏色運算將個別對 紅色，綠色 與 藍色 進行計算，因此將 每二個數值爲一組 分別計算，如下所示：

      01 + 04 = 05
      02 + 05 = 07
      03 + 06 = 09
    

  • 最後顏色計算結果如下所示：

      $color: #050709;
    

  • Sass 同時支援 rgba()，hsla() 與字串表示 (如：red 或 blue) 的顏色計算。
• 常用 RGB 顏色函式
  • rgb($red, $green, $blue)：由紅、綠、藍建立一個十六進制的顏色碼。

      $color1: rgb(200, 40, 88);
      /* $color1: #c82858 */
    

  • rgba($red, $green, $blue, $alpha)：由紅、綠、藍和透明度建立 RGBA 顏色。

      $color1: rgba(200, 40, 88, .65);
      /* $color1: rgba(200, 40, 88, .65) */
    

  • rgba($color, $alpha)：由十六進制的顏色碼與透明度建立一個 RGBA 顏色。

      $color1: rgba(#c82858, .65);
      /* $color1: rgb(200, 40, 88, .65) */
    

  • mix($color1, $color2, $proportion)：將 $color1 和 $color2 按照 $proportion 混合新的顏色。

      $color: mix(#c82858, rgba(200, 40, 80, .65), .3)
      /* $color: rgba(200, 40, 80, 0.65105) */
    

• 常用 HSL 顏色函式
  • hsl($hue, $saturation, $lightness)：由色相 (hue)、飽和度 (saturation) 和亮度（lightness）的建立顏色。

      $color: hsl(200, 30%, 60%);
      /* $color: #7aa3b8 */
    

  • hsla($hue, $saturation, $lightness, $alpha)：由色相、飽和度、亮度和透明度建立 RGBA 顏色。

      $color: hsl(200, 30%, 60%, .8);
      /* $color: rgba(122, 163, 184, .8) */
    

  • grayscale($color)：建立 $color 的灰階色，相當於 desaturate($color, 100%)。

      $color: grayscale(#ff3366);
      /* $color: #999999 */
    

  • complement($color)：建立 $color 的補色，相當於 adjust-hue($color, 180deg)。

      $color: complement(#ff3366);
      /* $color: #33ffcc */
    

  • invert($color)：建立 $color 的反相色，即紅、綠、藍的值倒序，透明度不變。

      $color: invert(#ff3366);
      /* $color: 00cc99 */
    

• 常用的透明度調整：CSS 中對於顏色的設定提供許多表示的方式，而其中 rgba() 與 hsla() 在顏色的呈現方面增加 透明度 (Opacity) 的表示。
  • fade-out($color, $amount) 或 transparentize($color, $amount)：藉由數值 0 至 1 作爲 減少透明度 的表示方式。

      $color1: rgba(39, 39, 39, 0.5);
      $amount: 0.1;
      /* rgba(39, 39, 39, 0.4) */
      $color2: fade-out($color, $amount);
    

  • fade-in($color, $amount) 或 opacify($color, $amount)：藉由數值 0 至 1 作爲 增加透明度 的表示方式。

      $color1: rgba(39, 39, 39, 0.5);
      $amount: 0.1;
      /* rgba(39, 39, 39, 0.6) */
      $color2: fade-in($color, $amount);
    

補充

• Sass 學習雜記 - A1. 數學函式
• 線上 Sass 顏色工具

5.2 數學運算

• Sass 中支援以下數學運算：
  • 加法運算 (Addition)
  • 減法運算 (Subtraction)
  • 乘法運算 (Multiplication)
  • 除法運算 (Division)
  • 餘數運算 (Modulo)
• 在數學運算中，只允許 單位相同 的數值進行運算。
  • 如：無法同時對 px 與 em 進行運算。
• 在乘法運算中，二個數值相乘的結果其單位爲 原本單位的平方。
  • 如：10px * 10px = 100px * px。
• 在除法運算中，其實是在進行 平分 的概念。
  • 被除數的部分可以是 變數 或 函式回傳的數值。
  • 被除數部分可以使用 小括弧 (( )) 括住。
  • 被除數部分可以是另一個運算式。

      /* 是除法運算 */
      width: $var / 6;
      /* 是除法運算 */
      line-height: (600px) / 6;
      /* 是除法運算 */
      margin-left: 20-10 px / 2;
      /* 非除法運算 */
      font-size: 10px / 8px;
    

5.3 樣式控管

• 許多網站在開發時，很常會在一些節慶更換網頁的主題樣式 (e.g., 配色、字體等)。
• 傳統的 CSS 作法，會針對新的主題新增一個 CSS 檔案，因此最後會有二個 CSS 檔案：
  • 原始的 CSS 檔案 (又稱：全域樣式)，用來定義基本的框架、排版、主題等，
  • 新增的 CSS 檔案 (又稱：主題樣式)，針對新的主題去做調整，當套用新的主題時，會直接覆蓋掉原始的 CSS 樣式。
• 傳統的 CSS 作法存在以下優缺點：
  • 優點：若之後要再新增一個主題樣式，可以直接複製修改。
  • 缺點：
    • 增加對 CSS 檔案的 Request 次數
    • 由於利用 CSS 覆蓋的特性設計，會使得 CSS 程式碼變得很多。

5.3.1 nth($list, $index) 與 index($list, $value)

• nth($list, $index)
  • 在變數表示中，變數型態可以是「清單 (Lists)」的型式 (即：變數值可以為多個)。

      /* Define text-color list */
      $text-color: #1212ff, blue, yellow;
    

  • nth($list, $index) 可以取出在 $list 中第 $index 的變數值，其中索引值是由 1 開始起算。

      /* Define text-color list */
      $text-color: #1212ff, blue, yellow;
    
      .content {
          color: nth($text-color, 3);
          /* color: yellow */
      }
    

• index($list, $value)
  • 與 nth($list, $index) 很類似，是取出 $value 所對應的索引值。

      /* Define text-color list */
      $text-color: #1212ff, blue, yellow;
    
      .content {
          color: index($text-color, yellow);
          /* color: 3 */
      }
    

  • 由上述例子可以看出，在 $list 中變數值為 yellow 的索引值為 3。
• 綜合以上 nth($list, $index) 和 index($list, $value) 可以搭配一起使用，發揮版本控管的能力。往後若要新增主題樣式，只需新增在 $sites 之後，並在要修改的屬性再新增一個變數值即可。

    /* Define the class of site */
    $sites: entertainment, medical, science, living, child;
  
    /* Define the style for each class */
    $text-color: red, orange, yellow, green, blue;
    $bg: #fff, #000, #000, #111, #fff;
  
    /* Choose the current style */
    $style: index($sites, coffee);
    .box {
        background: nth($bg, $style);
        color: nth($text-color, $style);
    }
  

• 在上述例子中，除了用「清單 (List)」外，還可以用「Maps」的方式打包要修改的屬性值。

    /* Define the class of site */
    $sites: entertainment, medical, science, living, child;
  
    /* Define the style for each class */
    $text-color: red, orange, yellow, green, blue;
    $bg: #fff, #000, #000, #111, #fff;
  
    /* Choose the current style */
    $style: index($sites, coffee);
    .box {
        background: nth($bg, $style);
        color: nth($text-color, $style);
    }
  

References

• Sass Functions - TutorialPoints
• Sass Operations - TutorialPoints
• Sass Parantheses - TutorialPoints
• Sass Documentation - Functions
• SCSS 15分鐘入門
• Codecademy - Learn Sass

【Sass 學習雜記】系列

• Sass 學習雜記 - Part 1. 簡介
• Sass 學習雜記 - Part 2. 變數表示
• Sass 學習雜記 - Part 3. 巢狀表示
• Sass 學習雜記 - Part 4. 組合表示
• Sass 學習雜記 - Part 5. 函式與運算
• Sass 學習雜記 - Part 6. 條件與迴圈
• Sass 學習雜記 - Part 7. 常見的編譯錯誤
• Sass 學習雜記 - Part 8. 開發架構與檔案切割
• Sass 學習雜記 - Part 9. 合併樣式
• Sass 學習雜記 - A1. 數學函式
• Sass 學習雜記 - A2. 顏色函式
• Sass 學習雜記 - A3. 字串函式

如果你有任何建議與指教，歡迎於下方留言一起討論喔！