@ Sass

Sassのコメント

1行コメント

Sass では「//」による1行コメントを使うことができます。

styles.scss

.item {
  //width: 350px;
  min-height: 300px;
  _height: 300px;
}

コンパイル後の CSS は次のようになります。

styles.css

.item {
  min-height: 300px;
  _height: 300px;
}

通常のコメント

Sass では CSS と同様に /* */ で囲んだ範囲はコメントとなります。

styles.scss

.item {
/*
  width: 350px;
*/
  min-height: 300px;
  _height: 300px; /* for IE6 */
}

コンパイル後の CSS は次のようになります。

styles.css

.item {
  /*
    width: 350px;
  */
  min-height: 300px;
  _height: 300px;
  /* for IE6 */
}

アウトプットスタイルを「compressed」にすると CSS のコメントも削除されます。「compressed」にしても残したいコメントがある場合は「/*」の直後に「!」を書きます。

styles.scss

.item {
  /*! width: 350px; */
  min-height: 300px;
  _height: 300px; /* for IE6 */
}

コンパイル後の CSS は次のようになります。

styles.css

.item {
  /*! width: 350px; */
  min-height: 300px;
  _height: 300px;
}