CSSやSass、SCSSでコメントアウト（テキスト非表示）方法

CSSを書いててスペースで区切るだけでは、分かりにくいことがあったりします。
そんな時便利なのが、コメントアウト。
このスタイルは、ヘッダー要素のだよ！とか、共通部分をまとめる時にここから～ここまで。
みたいに使い方は色々なコメントアウトの記述方法と、
SassやSCSSでは、mixinmixinとかイメージやカラーなどの共通部分を
分かりやすくコメントアウトで区切る方法のご紹介です。

CSSでコメントアウト

スタイルごとに日本語で説明できるコメントアウトは便利です。
書き方は以下の通り。

/* 一行で書いてもいいし */

/*
  複数行にまたいで
  書いても大丈夫です！
*/

/* */

この記号を文の先頭と末尾に書けば、日本語で書いてもスタイルが崩れたりすることがありません。
でも、「*/ /*」みたいに反対に書いちゃうと、崩れてしまうのでそこは注意してください。
次は、SassとSCSSのコメントアウトについてです。

Sass、SCSSでコメントアウト

Sass、SCSSのコメントアウトも「/* */」を使います。
さらに、文の先頭に「//」を付けるだけのコメントアウトも存在します。
２つもあるとこんがらがっちゃうけれど、使い分け方があるんです。

Sass、SCSSは、スタイルを書き終えたらCSSにコンパイルして、サーバーへアップします。

Sass、SCSS共に、
コンパイル後「/* */」←このコメントアウトは残りますが、
文の先頭につける「//」←このコメントアウトは残りませんので、
下記のように使い分けると、Sass、SCSSファイルだけにコメントを残して分かりやすくなります。

// これはSCSSファイルです。
/* この要素はコンテンツのスタイルです。 */
.content {
  width: 100%;
  height: 120px;
  a {
    color: pink;
  }
  p {
    color: gray;
  }
}

↓コンパイル後↓

/* この要素はコンテンツのスタイルです。 */
.content {
  width: 100%;
  height: 120px;
｝
.content a {
  color: pink;
}
.content p {
  color: gray;
}