web制作マン

・Sassのコメントアウトをコンパイルした後も残したい

・コメントアウトの種類によって違いがあるの？

こういった悩みや疑問を解決していきます！

今回はSassのコメントアウトについてです。

共同開発などするときなどは特に、チームの方に自分の書いたコードをわかりやすく伝えるためにコメントアウトをすることも多いと思います。

しかし、Sassで書いていたコメントアウトがCSSにコンパイルした時に消えてしまう時があります。

消えてしまう原因とその解決策までサクッと紹介していきます。

Sassのコメントアウトの種類

まずはSassのコメントアウトには2種類あるのでそれを紹介します。

1行コメント「/ /」

まずは1行コメントです。実際のSassの中での書き方はこんな感じです。

body
  h1
    font-size: 20px
    margin-bottom: 60px //1行コメント

  .main-contents  //1行コメント
    margin: 0 auto

このように「//」を前につけることで1行のコメントをつけることができます。

複数行コメント「/* */」

続いては複数行コメントを紹介したいと思います。

先ほどの1行コメントとは違い、複数にわたってコメントを残すことができます。書き方はこんな感じです。

  .main-contents 
    /* ーーーーーーーーー
      複数行コメント
      2行目だよ 
      ーーーーーーーーーー*/
    margin: 0 auto 

複数行のコメントアウトするときの注意点としてはインデントを意識することです。

Sassの記法はインデントによって階層を区別するので2行目以降のコメントをインデントしていないとコードを追加したと誤認識されコンパイルエラーになります。

そのため2行目以降は上のコードのようにきちんとインデントするようにしましょう。

コメントアウトの種類によるコンパイル後の表示

Sassのコメントアウトが2種類あることがわかったところでそれぞれのコメントアウトをした際のコンパイル後のCSSの表示を確認してみましょう。

1行コメント「/ /」のコンパイル後の表示

先ほどのsassで1行コメントをした場合のCSSで表示はこんな感じになります。

body h1 {
  font-size: 20px;
  margin-bottom: 60px;
}
body .main-contents {
  margin: 0 auto;
}

ご覧の通り、コメントはCSSには反映されなくなりました。1行コメントではCSSにコンパイルすると消えてしまうので覚えておきましょう。

複数行コメント「/* */」のコンパイル後の表示

今度は複数行のコメントアウトをしたsassのコンパイルされたCSSファイルではこんな感じに表示されます。

body .main-contents {
  /* ーーーーーーーーー
  * 複数行コメント
  * 2行目だよ 
  * ーーーーーーーーーー*/
  margin: 0 auto;
}

きちんとコメントアウトがCSSでも表示されていますね。

複数行コメントとはいっていますが、もちろん1行でも書くことができるので試してみてください。

body h1 {
  font-size: 20px;
  margin-bottom: 60px;
}
body .main-contents {
  /* コメント残す */
  margin: 0 auto;
}

状況によってコメントアウトの使い分けをしよう

いかがだったでしょうか。

sassのコメントアウトには2種類あってCSSに残るものと残らないものがあるので違いを理解しつつ、使い分けれるようになりましょう！