Sassの書き方（コメント）

コメントの書き方

Sassでは通常のCSSと同様にコード中にコメントを書くことができますが、複数行コメント「/* コメント */」に加えて１行コメント「// コメント」で書くことができます。

style.scss

// Common CSS （１行コメント例）

//------------------------------
// Common CSS （１行コメント例）
//------------------------------
main {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	color: #0069d4;
}

/*------------------------------
Common CSS （複数行コメント例）
------------------------------*/
main {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	color: #0069d4;
}

コンパイルすると1行コメントは出力したCSSからは削除され、複数行コメントは通常のCSSのコメントとして残ります。

style.css

main {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  color: #0069d4;
}

/*------------------------------
Common CSS （複数行コメント例）
------------------------------*/
main {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  color: #0069d4;
}

ただし、gulp-clean-cssを使って出力するCSSコードを圧縮した場合は複数行コメントも圧縮するコンパイル時に削除されます。
もし圧縮後もどうしても残したいコメントがあるときは、複数行コメントの開始を「/*!」にするとコンパイル後も残すことができます。

style.scss

/*!------------------------------
Common CSS （複数行コメント例）
------------------------------*/
main {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	color: #0069d4;
}

基本的には1行コメントを使い、出力したCSSコードにあえてコメントを残したい場合のみ複数行コメントを使う、というような使い分けができます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。