Sass 學習雜記 - Part 7. 常見的編譯錯誤

Part 7. 常見的編譯錯誤

在編譯 Sass/SCSS 時，時常會遇到一些編譯失敗的問題，通常要找很久才知道該怎麼撰寫正確的 Sass/SCSS 格式，這裡提供一些除錯細節，並了解如何除錯才不會有問題。

7.1 Sass/SCSS 常見的編譯錯誤

1. 編譯錯誤流程 當發生編譯錯誤時，編譯完的 CSS 中的前幾行會顯示 Sass/SCSS 發生問題在哪一行，直接到那一行去檢查就知道問題點在哪裡即可。下述範例則是第 20 行因為有載入變數，但因為 Sass 檔案找不到那個變數，所以無法帶進去，才導致編譯錯誤：

    Syntax error: Undefined variable "$btn-color".
            on line 20 of /Users/yungshenglu/Project/papoGen/scss/elements
    Backtrace:
    /Users/yungshenglu/Project/papoGen/scss/elements:20
    ...
   

2. 撰寫格式錯誤 在撰寫 Sass/SCSS 時，在設定每一個屬性與屬性值之間需要「空格」，如：color: red 的 : 之後要加上「空格」。如果是使用 Sublime 編輯器，則會自動加上空格，如果是其他編輯環境，需要留意此問題。

    .page {
        /* Wrong format */
        color:red;
        /* Correct format */
        color: red;
    }
   

3. 階層繼承錯誤 (非 SCSS 格式) 在使用繼承時，要遵循階層繼承。第一層後面要繼承下面的程式碼，就必須用推動的方式來進行繼承，而推動方式可用 1 個 tab 或兩個半型空格來推動，不可隨便亂推動。

    /* Wrong format */
    .logo
        width: 900px
            a
                color: #fff
    /* Correct format */
    .logo
        width: 900px
        a
            color: #fff
   

4. 變數宣告位置錯誤 變數宣告與使用 Mixin 時，都必須將有使用到的變數宣告在前，否則便會編譯錯誤。

    /* Wrong format */
    .page {
        background: $bg-color;
    }
    $bg-color: #fff000;
    /* Corret format */
    $bg-color: #fff000;
    .page {
        background: $bg-color
    }
   

5. 字串使用與串接錯誤 如果導入變數的地方，本身是「字串的意涵」，或前後都有連接字串，務必在變數外加個 #{} (即：#{$variable})，否則也會編譯錯誤。

    /* Wrong format */
    $bg-name: logo;
    .$bg-name {
        background: url(../images/$bg-name);
    }
    /* Correct format */
    .#{$bg-name} {
        background: url(../images/#{$bg-name});
    }
   

7.2 Error Handling

Sass/SCSS 提供以下兩個指令 @debug 和 @warn 來協助我們做錯誤處理。

• 使用指令 @debug 指令 @debug 可以針對 Sass/SCSS 的語法印出標準錯誤輸出訊息，在除錯過程中，尤其是對於複雜的 Sass/SCSS 語法非常有用。例如：我們要針對以下 Sass/SCSS 語法除錯。

    @debug 10em + 12em;
  

  經過編譯過後，輸出為：

    Line 1 DEBUG: 22em
  

• 使用指令 @warn 指令 @warn 和指令 @debug 類似可以針對 Sass/SCSS 的語法印出標準錯誤輸出訊息，提醒開發者降低可能的錯誤發生，和 @debug 最大的不同在於：
  • 可以透過 Sass 指令的參數 --quiet 或 Sass 中的選項 :quiet 將警告訊息關掉。
  • 在編譯過程中的「樣式表追蹤 (stylesheet trace)」會將 @warn 之後定義的警告訊息印出。

      @mixin adjust-location($x, $y) {
      @if unitless($x) {
          @warn "Assuming #{$x} to be in pixels";
          $x: 1px * $x;
      }
      @if unitless($y) {
          @warn "Assuming #{$y} to be in pixels";
          $y: 1px * $y;
      }
      position: relative; left: $x; top: $y;
      }
    

References

• An Introduction to Error Handling in Sass
• Using Sass’s @error, @warn, and @debug Directives
• 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. 字串函式

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