Sass注釋

1. 簡介

本節(jié)內(nèi)容我們將講解 Sass 中的單行注釋和多行注釋，以及 Sass 注釋的書寫規(guī)范，良好的注釋習(xí)慣可以讓我們的代碼更容易維護(hù)，讓接手我們代碼的合作者更高效。

2. 什么是 Sass 注釋

注釋就是說你可以在代碼中以特定的方式為代碼增加注解，每種編程語言都擁有自己的注釋方式，在 Sass 中也不例外，注釋可以讓我們?yōu)橹匾拇a增加注解以方便我們和其他開發(fā)者查閱。

3. Sass注釋的使用

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

3.1 單行注釋

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

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

上面的代碼轉(zhuǎn)換為 CSS 如下：

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

從上面的代碼中我們可以看出，轉(zhuǎn)換為 CSS 后我們?cè)?Sass 中寫的單行注釋消失了。

3.2 多行注釋

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

/* 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
  }
}

上面的代碼轉(zhuǎn)換為 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;
}

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

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

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

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

4. 注釋書寫規(guī)范

在 Sass 中書寫注釋首先要記住，要根據(jù)情況來選擇你使用上面哪種注釋方式，其余的一些注釋規(guī)范不同的團(tuán)隊(duì)可能有不同的標(biāo)準(zhǔn)，遵循你的團(tuán)隊(duì)的代碼規(guī)范即可。如果沒有的話你可以遵照 CSS 的注釋規(guī)范，同時(shí)我們的項(xiàng)目中不允許使用 /*! */ 的方式注釋，因?yàn)槲覀円?strong>確保壓縮版的 CSS 中是不包含任何注釋的！

我這里寫出一些我們的注釋書寫規(guī)范：

• 注釋不允許嵌套
• 兩條注釋間使用換行分隔
• 函數(shù)必須編寫注釋來寫明函數(shù)的作用、入?yún)⒑统鰠?/li>
• mixin 必須編寫注釋寫明作用
• 公共變量必須編寫注釋寫明作用
• 公共樣式必須編寫注釋寫明作用
• 用于繼承的文件必須編寫注釋寫明使用場景
• 如有某些代碼需要在后期修改或優(yōu)化，需要編寫注釋，其注釋中的內(nèi)容需要以 TODO 開頭有

除了上面這些規(guī)范我們還要求在每個(gè)文件的頭部注釋當(dāng)前文件的創(chuàng)建時(shí)間、作者和對(duì)于當(dāng)前文件內(nèi)容的描述，就如同下面這樣：

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

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

5. 實(shí)戰(zhàn)經(jīng)驗(yàn)

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

除此之外需要注意遵循團(tuán)隊(duì)的注釋規(guī)范，一般規(guī)范都由團(tuán)隊(duì)的 leader 或架構(gòu)師來制定，如果你的項(xiàng)目中沒有制定這些規(guī)范，請(qǐng)遵循 CSS 的注釋規(guī)范或者業(yè)界通用的規(guī)范，當(dāng)然你也可以選擇我前面列出來的規(guī)范?？傊涀?，注釋和代碼一樣重要！

6. 小結(jié)

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