【CSSとは違う！？】Sassのコメントアウトについて解説【全3種類】

※本サイトはアフィリエイト広告を利用しています。

【Sassのコメントについて知りたい人】

 

こういった疑問に答えます。

本記事の内容

• Sassのコメントアウトについて解説【全3種類】
• 3種類のSassのコメントアウトの使い分け

この記事を書いている僕は、
過去にWeb制作会社で
エンジニアとして働いており、
現在も日頃からSassを使って
コーディングをしています。

そんな僕が、
Sassのコメントアウトの種類と
それぞれの特徴について解説します。

読み終える頃には
Sassのコメントアウトについて
ひと通り理解できる、
そんな記事になっているので
安心して読み進めちゃってください。

Sassのコメントアウトについて解説【全3種類】

CSSで使うコメントは
『/* */』の形式の1種類のみですが、
Sassにはプラスでもう2種類あります。

それが全部で
下記の3種類です。

• 種類①：1行コメント
• 種類②：CSSと同じ通常のコメント
• 種類③：outputStyleが『compressed』でも残るコメント

順番にみていきます。

種類①：1行コメント

こちらは
JavaScriptでも使われる
スラッシュ2つ『//』
の形式のコメントです。

この1行コメントの特徴が
下記の2点です。

• 『//』の後の1行のみがコメントとしてみなされる
• CSSでは使えないので、コンパイル後は削除される

上記にもあるように
『//』の後の1行のみを
コメントとしてみなすので、
複数行で使いたい場合には
その行の先頭に毎回
スラッシュ2つ『//』を
記述しないといけません。

種類②：CSSと同じ通常のコメント

次に、
CSSと同じ『/* */』で囲う形式
のコメントです。

こちらの形式のコメントは
先ほどの1行コメントとは違い、
基本的にコンパイル後も残るのが特徴です。

ただし
「基本的に」と書いたのは、
コンパイル時のoutputStyleが
「compressed」だと残らないためです。

※SassのoutputStyleについては
下記の記事で解説しています。

 
≫ SassのoutputStyleについて徹底解説【全4種類】

SassのoutputStyleについて徹底解説【全4種類】

Sassをコンパイルした際に書き出されるCSSの形式『outputStyle』について知りたいですか？本記事では、そのoutputStyleの種類や特徴、またそれぞれの使い分けについて解説します。SassのoutputStyleについて知りたい人は是非ご覧ください。

種類③：outputStyleが『compressed』でも残るコメント

最後の3つ目が、
outputStyleが『compressed』
の場合でも残る
『/*』の直後に『!』を書く形式
のコメントです。

こちらそもそも
outputStyleをcompressed
にしている時点で、
CSSファイルの中身を確認することは
あまり無いと思うので、
使う機会自体は少ないのかな
という感じがしています。

body {
	/*! コメント */
	color: gray;
	p {
		color: black;
	}
}

 

上記のコードをコンパイルすると、

 
 

body{/*! コメント */color:gray}body p{color:black}

 

このように
『/*』の直後の『!』もそのまま残ります。

3種類のSassのコメントアウトの使い分け

最後に
3種類それぞれの
コメントアウトの使い分けですが、
下記の方法が一般的です。

• コンパイル後もコメントを残したい →『/* */』の形式を使用
• コンパイル後はコメントを削除したい →『//』の形式を使用
• compressedにしているがコメントを残したい →『/*! */』の形式を使用

 

使用する状況に応じて、
ベストなコメントアウトを使い分けてください。