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

CSSやSass、SCSSでコメントアウト(テキスト非表示)方法 CSS
この記事は約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;
}
SNSフォローボタン
エンデ・バタローをフォローする
CSSSASS・SCSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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