Sass 學習雜記 - Part 2. 變數表示

Part 2. 變數表示 (Variables)

Sass 爲解決過去 CSS 許多 不便 的地方，因此提供許多額外的指令讓 CSS 撰寫起來更有效率且簡潔。本章將開始介紹 Sass 的三大觀念： 變數表示 (Variables) ， 巢狀表示 (Nesting) ， 組合表示 (Mixins) 。以下將說明 變數表示 (Variables) 的部分。

• 過去撰寫 CSS 最大的困擾便是，同一個屬性因爲在不同的選取項下而要給定許多不同的值。
  • 修改 CSS 全域設定時，時常要反覆查找從數百行中程式碼，相當煩人。
  • 這樣的過程對於網頁開發與維護相當不便，一旦要改變部分 選取項下的同一個屬性時，只能逐一去修改。
• Sass 提供變數表示的方式，可以事先宣告需有相同屬性值的變數，並代入各個屬性中。
  • Sass 的變數表示允許我們 任意定義變數並給與特定值。

2.1 變數表示

• 在 Sass 中，以符號 $ 作爲變數宣告的前綴符號，變數名稱的宣告務必清楚。

    $translucent-white: rgba(255, 255, 255, 0.3);
  
    .selector {
        backgrond-color: $translucent-white;
    }
  

• 實際案例：
  • 一般來說，在建置網頁時，美術設計師通常會針對同一個元件 (e.g., 按鈕、連結等) 設計多組樣式，以文字連結顏色為例，下面 CSS 程式中各個 <div> 裡面的連結 <a> 所設定的文字顏色都不同，當我們要修改某一個顏色時，只能逐行修正，雖然可以透過全選與替換字串解決，但很容易會遺漏一些設定，或是更改到不應該被更動的設定。

      .header a {
          color: #000;
      }
      .navbar a {
          color: blue
      }
      .container a {
          color: #000;
      }
      .nav a {
          color: blue;
      }
    

  • 如果改使用 Sass 的話，可以很方便的完成設定，程式碼如下：

      /* Define color variables */
      $link-color-1: #000;
      $link-color-2: blue;
    
      /* Using color variables to replace color code */
      .header a {
          color: $link-color-1;
      }
      .menu a {
          color: $link-color-2;
      }
      .footer a {
          color: $link-color-1;
      }
      .nav a {
          color: $link-color-2;
      }
    

• 除了支援色碼的代換外，Sass 的變數還支援「字串」、「數字」等。若要代換「雙引號的字串」，可以用 #{ } 取出變數，尤其在代換樣式的 class 名稱。

    /* Define variables */
    $background: '../img/'
    $icon-style: blue;
  
    /* Using variables to replace original style */
    .header {
        background: url(#{$background}header.jpg);
    }
    .icon-#{$icon-style} {
        color: $$icon-style;
        background: $icon-style;
    }
    .#{icon-style} {
        border-color: $icon-style;
    }
  

• 預設值 (Default value)：我們可以在定義好的變數後方加上 !default 給定變數的「預設值」，若要取代預設值，則取代方式很簡單，只需要在「預設值前面」重新設定數值即可。

    $lineHeight: 2;
    $lineHeight: 1.5 !default;
  
    body {
        line-height: $baseLineHeight;
    }
  

  • 以上 Sass 範例經過編譯後，會得到以下的 CSS 程式碼：

      body {
          line-height: 2;
      }
    

2.2 變數型態

• 數值 (Numbers)
  • 若變數爲 數值與單位 的組合仍然爲 數值型態 。如：10px，0.2em，100%等。

      /* Define number variables */
      $icon-square-length: 300px;
    
      .icon {
          width: $icon-square-length;
          height: $icon-square-length;
      }
    

• 字串 (Strings)
  • 不論是否包含 引號 (' ')，皆屬於 字串型態 。如：'apple'，center，bold等。

      /* Define string variables */
      $font: 'Pacifico';
    
      h1 {
          font-family: $font, cursive;
      }
    

• 布林值 (Booleans)
  • 包含 true 與 false。
  • 通常用於「條件運算 (Conditions)」，請參考Sass 學習雜記 - Part 6. 條件與迴圈。

      /* Define boolean variables */
      $i-am-true: true;
      $i-am-false: false;
    
      body {
          @if not $i-am-true {
              background: rgba(255, 0, 0, 0.6);
          } @else {
              background: rgba(0, 0, 255, 0.6);
          }
      }
    

• 空值 (Null)
  • 以 null 表示，可以視爲 empty value。

      /* Define boolean variables */
      $i-am-true: null;
      $variable: "";
    
      body {
          @if $variable == $i-am-true {
              background: rgba(255, 0, 0, 0.6);
          } @else {
              background: rgba(0, 0, 255, 0.6);
          }
      }
    

• 清單 (Lists)
  • 能以 空格 或 逗號 (,) 分開。如：1.5em Helvetica bold; 或 Helvetica, Arial, sans-serif;。

      /* Define list variables */
      $standard-border: 4px solid black;
    
      .banner {
          border-top: $standard-border;
          border-bottom: $standard-border;
      }
    

  • 能以 小括弧 (( )) 括住且可用清單組合出新的清單。
• Maps
  • 與清單的概念相似，但是之中的每一項是 key-value 序對 。如：(key1: value1, key2: value2)。
  • 在 Map 中的每一個 Key 所對應的 value 可以是一個 List 或另一個 Map。

      /* Define map variables */
      $colors: (
          grey: #efefef,
          pink: #ff6599,
      );
      $backgrounds: (
          grey: #ebe4e8
      );
    
      body {
          background: map-get($backgrounds, grey);
          color: map-get($colors, pink);
      }
    

References

• Sass Variables - TutorialPoint
• Sass DataTypes - TutorialPoint
• Sass Interpolation - TutorialPoint
• Sass Variable Defaults - TutorialPoint
• Sass/SCSS 簡明入門教學
• 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. 字串函式

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