「Sassのコメントアウトってどうやって書くんだろ。CSSとの違いもあれば知りたいな。」
こういった疑問に答えます。
本記事の内容
この記事を書いている僕は、 過去に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にしているがコメントを残したい →『/*! */』の形式を使用
使用する状況に応じて、 ベストなコメントアウトを使い分けてください。
