Sassについては過去の記事で魅力について書いていますが、簡単に言えば、CSSをパワーアップさせてかなり便利に運用できるように拡張した言語です。

そのかなり便利なSassですが、そのまま(拡張子が.scss)ではブラウザは認識できません。そのためCSSファイルにコンパイルする必要があります。

例えば以下のsample.scssファイルをコンパイルすると、

header {
  width: 100%;
  background-color: #f9f8f3;
  #headerTop {
    width: 100%;
    background-color: #ccc;
    padding: 2px 0px;
    .siteDescription {
      color: #fff;
      margin: 0;
    }
  }
}

header {
  width: 100%;
  background-color: #f9f8f3; }
  header #headerTop {
    width: 100%;
    background-color: #ccc;
    padding: 2px 0px; }
    header #headerTop .siteDescription {
      color: #fff;
      margin: 0; }

コンパイル後のファイルを見るとSassファイルのネスト(入れ子)構造に沿った形でインデントされて出力されています。コンパイル後にこのようにアプトプットされるスタイルをNestedといいます。

1.Nested

Sassファイルのネスト(入れ子)構造に沿った形でインデントされます。ぱっと見はネストされているような見た目ですね。このNestedスタイルがデフォルトになります。

ただし、Sassを使用していない人にとっては少し違和感を感じるかもしれません。そんなときはアウトプットスタイルを指定して見た目を変えることができます。指定できるスタイルはデフォルトのNestedの他に以下のように3種類あります。

2.Expanded

セレクタや宣言ブロックの宣言を一行ずつ改行したスタイルです。Dreamweaverのコードフォーマットとほぼ同じスタイルですね。

header {
  width: 100%;
  background-color: #f9f8f3;
}
header #headerTop {
  width: 100%;
  background-color: #ccc;
  padding: 2px 0px;
}
header #headerTop .siteDescription {
  color: #fff;
  margin: 0;
}

3.Compact

セレクタと宣言ブロックが一行になり、ルールセットごとに改行されます。

header { width: 100%; background-color: #f9f8f3; }
header #headerTop { width: 100%; background-color: #ccc; padding: 2px 0px; }
header #headerTop .siteDescription { color: #fff; margin: 0; }

4.Compressed

インデントや改行、コメントも削除されサイズの軽量化を優先します。

header{width:100%;background-color:#f9f8f3}header #headerTop{width:100%;background-color:#ccc;padding:2px 0px}header #headerTop .siteDescription{color:#fff;margin:0}

このように4種類のアプトプットスタイルが指定できます。私はフリーランスなので通常一人で作業をしています。そのため、サイズの軽量化を優先させたCompressedを指定しています。

しかし、Compressedを指定していると困ることがあります。それはWordPressを利用したウェブサイトの場合、コメント形式で記述されている「style.css」のヘッダ情報がコンパイル時に削除されるとテーマとして機能しないということです。

そこでCompressedスタイルを指定してもコメントが削除されないようにするやり方があります。

それは以下のように削除したくないコメントにある「/*」の直後に「！」を書きます。

@charset "UTF-8";
/*!
Theme Name: hubworks PC Theme 00
Theme URI:
Description: hubworksのテーマ00
Author: hubworks
Author URI: https://hubworks.jp
Version:1.0
*/

これで「style.css」必須のヘッダ情報が削除されずに残ります。

@charset "UTF-8";/*!
Theme Name: hubworks PC Theme 00
Theme URI:
Description: hubworksのテーマ00
Author: hubworks
Author URI: https://hubworks.jp
Version:1.0
*/header{width:100%;background-color:#f9f8f3}header #headerTop{width:100%;background-color:#ccc;padding:2px 0px}header #headerTop .siteDescription{color:#fff;margin:0}