Sass注釋

1. 簡介

本節內容我們將講解 Sass 中的單行注釋和多行注釋，以及 Sass 注釋的書寫規范，良好的注釋習慣可以讓我們的代碼更容易維護，讓接手我們代碼的合作者更高效。

2. 什么是 Sass 注釋

注釋就是說你可以在代碼中以特定的方式為代碼增加注解，每種編程語言都擁有自己的注釋方式，在 Sass 中也不例外，注釋可以讓我們為重要的代碼增加注解以方便我們和其他開發者查閱。

3. Sass注釋的使用

在 Sass 中的任何地方你都可以編寫一段注釋，Sass 支持標準的 CSS 單行注釋（//）和多行注釋（/* */），我們接下來就看看它們的使用。

3.1 單行注釋

單行注釋是在 // 后面跟你的注釋內容，直到行尾，要記住 Sass 中的單行注釋不會被編譯到 CSS 中，也就是說在轉換為 CSS 代碼后，是不會包含你寫的單行注釋的！我們舉個例子來看下：

// This is a comments
// This is a comments
.box2 {
  width: 200px;
  height: 100px;
  p {
    color: red
  }
  .main {
    width: 100%;
  }
}

上面的代碼轉換為 CSS 如下：

.box2 {
  width: 200px;
  height: 100px;
}
.box2 p {
  color: red;
}
.box2 .main {
  width: 100%;
}

從上面的代碼中我們可以看出，轉換為 CSS 后我們在 Sass 中寫的單行注釋消失了。

3.2 多行注釋

多行注釋是在 /* */ 的兩個星號中間來編寫注釋內容，以 /* 開頭，換行的話每一行都以 * 號開頭，最終以 */ 結尾，多行注釋是會被編譯到 CSS 中的，并且在多行注釋中我們可以使用插值，如果你忘記了什么是插值，趕快復習一下前面的 Sass 插值章節。下面我們舉例看下多行注釋：

/* This is a comment
 * contain interpolation:
 * 1 + 1 = #{1 + 1}
 * 8 * 8 = #{8 * 8}
 */
.box2 {
  width: 200px;
  height: 100px;
  p {
    color: red
  }
  .main {
    width: 100%;
    heigth: auto
  }
}

上面的代碼轉換為 CSS 如下：

/* This is a comment
 * contain interpolation:
 * 1 + 1 = 2
 * 8 * 8 = 64
 */
.box2 {
  width: 200px;
  height: 100px;
}
.box2 p {
  color: red;
}
.box2 .main {
  width: 100%;
  heigth: auto;
}

通過上面的代碼可以看出，多行注釋最終將會被編譯為 CSS 的多行注釋并帶到 CSS 中去，而且在多行注釋中可以使用插值來進行一些運算。

在默認的情況下，如果處于壓縮模式，則轉換后的 CSS 中也是不包含多行注釋的，如果你忘了什么是壓縮模式，趕快復習下 Sass 輸出格式章節。所以我們可以通過以 /*! 開頭，來保證多行注釋在任何模式下都會被轉換為 CSS 輸出。我們舉例看下：

/*! This comment will be 
* included even in every mode. */
.box2 {
  width: 200px;
  height: 100px;
  p {
    color: red
  }
  .main {
    width: 100%;
    heigth: auto
  }
}

通過上面這種注釋方式就可以保證你的注釋內容在任何模式下都會被輸出。

4. 注釋書寫規范

在 Sass 中書寫注釋首先要記住，要根據情況來選擇你使用上面哪種注釋方式，其余的一些注釋規范不同的團隊可能有不同的標準，遵循你的團隊的代碼規范即可。如果沒有的話你可以遵照 CSS 的注釋規范，同時我們的項目中不允許使用 /*! */ 的方式注釋，因為我們要確保壓縮版的 CSS 中是不包含任何注釋的！

我這里寫出一些我們的注釋書寫規范：

• 注釋不允許嵌套
• 兩條注釋間使用換行分隔
• 函數必須編寫注釋來寫明函數的作用、入參和出參
• mixin 必須編寫注釋寫明作用
• 公共變量必須編寫注釋寫明作用
• 公共樣式必須編寫注釋寫明作用
• 用于繼承的文件必須編寫注釋寫明使用場景
• 如有某些代碼需要在后期修改或優化，需要編寫注釋，其注釋中的內容需要以 TODO 開頭有

除了上面這些規范我們還要求在每個文件的頭部注釋當前文件的創建時間、作者和對于當前文件內容的描述，就如同下面這樣：

/*
* Auth: ElvisYang
* Date: Mar 22 2018
* Desc: This is common scss
*/
.edit-price {
  .label {
    width: 125px;
    text-align: right;
  }
}

上面這種方式可以讓別人打開文件就清楚的看見文件的一個描述和作者，所以這個也納入了我們的注釋規范中，這種注釋你可以通過設置你的 IDE 來自動生成。

5. 實戰經驗

在實際的項目中注釋是必不可少的，在任何語言中都一樣。 Sass 作為一門 CSS 擴展語言，在實際項目中會定義很多函數、mixin 和變量等，所以你必須為它們編寫合理的注釋，這樣方便你自己或者其他人后期的維護，而且壓縮格式我們一般都是輸出不帶注釋的 CSS 代碼的。

除此之外需要注意遵循團隊的注釋規范，一般規范都由團隊的 leader 或架構師來制定，如果你的項目中沒有制定這些規范，請遵循 CSS 的注釋規范或者業界通用的規范，當然你也可以選擇我前面列出來的規范?？傊涀?，注釋和代碼一樣重要！

6. 小結

本節我們講解了 Sass 中注釋的使用方式和注釋的書寫規范，在 Sass 中有單行注釋和多行注釋，單行注釋不會輸出到 CSS 代碼中，多行注釋可以輸出到 CSS 代碼中，此外在多行注釋中還可以使用插值。編寫一手簡單、易懂的注釋是一個優秀程序員的基本素養，會為你的代碼加分，在你的 Sass 代碼中靈活的應用注釋吧！