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

CSSやSass、SCSSでコメントアウト(テキスト非表示)方法
この記事は約2分で読めます。

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

CSSでコメントアウト

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

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

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

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

Sass、SCSSでコメントアウト

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

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;
}
CSSSASS・SCSSサイト制作

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました