Sassで使用できる4つのアウトプット形式の特徴や使い方を解説

Sassとは、CSSを効率的に記述できるように設計・開発された言語です。

入れ子の使用、変数・関数の使用など便利な機能が多く、Web制作者なら必ず身につけておきたいスキルですね。

Sassファイルには.scssまたは.sassという拡張子がつきますが、これらはブラウザが解釈できないためそのまま読み込むことができません。

HTMLで読み込むには、SassファイルをCSSファイルに変換する作業（コンパイル）が必要となります。

このコンパイル作業でアウトプットされるCSSの形式は、以下の4つから選択することができます。

コンパイル形式によって、アウトプットされるCSSの見た目が変わります。

案件でよく使う形式やそれぞれの特徴を解説していきますので、ぜひ参考にしてみてください。

Sassで使用できる4つのアウトプット形式

Sassで使用できるアウトプット形式は以下の4つです。

以下にサンプルのSassコードを用意しましたので、4つのアウトプット形式でどのように見た目が変わるかを見ていきましょう。

/* blockのスタイル */
.block {
  display: flex;
  width: 100%;
  background-color: #fff;

  &__element {
    font-size: 32px;

    span {
      font-size: 16px;
    }
  }
}

1. nested

nestedを選択すると、CSSは以下のような見た目になります。

/* blockのスタイル */
.block {
  display: flex;
  width: 100%;
  background-color: #fff; }
  .block__element {
    font-size: 32px; }
    .block__element span {
      font-size: 16px; }

Sassでネストした際のインデントがそのまま保持されていますね。

アウトプット形式を何も指定しないとnestedがデフォルトで選択されます。

2. expanded

続いてexpandedを指定した場合のCSSを見てみましょう。

/* blockのスタイル */
.block {
  display: flex;
  width: 100%;
  background-color: #fff;
}

.block__element {
  font-size: 32px;
}

.block__element span {
  font-size: 16px;
}

こちらの場合は、CSSと同じ一般的な見た目になりましたね。

可読性が高いので、スタイルを後から編集する必要がある場合は最適です。

3. compact

compactを指定した場合、以下のような見た目になります。

/* blockのスタイル */
.block { display: flex; width: 100%; background-color: #fff; }

.block__element { font-size: 32px; }

.block__element span { font-size: 16px; }

セレクタとプロパティが1行に圧縮され、コンパクトになりました。

4. compressed

最後にcompressedを指定した場合を見てみましょう。

.block{display:flex;width:100%;background-color:#fff}.block__element{font-size:32px}.block__element span{font-size:16px}

インデントや改行が全て取り除かれ、全スタイルが1行に圧縮されました。

さらに、/* blockのスタイル */というコメントも消えているのが確認できますね。

他の3つの形式ではコメントは消えないままですが、compressedではコメントも削除されてしまいます。

案件でよく使用するのはexpandedとcompressedの2つ

4つのうち実際によく使用するのは、expandedとcompressedの2つです。

ここでは、どのような場合にどちらを使用すべきかを解説していきます。

expandedを使用するべき場合

CSSファイルを後から編集・追記する可能性がある場合は、expandedを使用しましょう。

expandedでアウトプットすると通常のCSSと同じ見た目になるので、可読性が高く編集しやすいです。

/* blockのスタイル */
.block {
  display: flex;
  width: 100%;
  background-color: #fff;
}

.block__element {
  font-size: 32px;
}

.block__element span {
  font-size: 16px;
}

こちら↑がexpandedでアウトプットした際の見た目です。

CSSの記法と全く同じなので、簡単に編集・追記することができますね。

案件によってはSassファイルの納品は必要なく、CSSファイルのみ納品する場合もあります。

その場合はSassで記述→最後はexpandedでアウトプットしたCSSファイルのみ納品というパターンが多いですね。

compressedを使用するべき場合

後からCSSファイルを編集・追記しない&ファイルサイズを最小限に抑えたい場合はcompressedが最適です。

compressedではインデントや改行が削除され、全てのスタイルが1行に圧縮されるので、ファイルサイズは小さくなります。

しかしその分可読性は悪くなり、後から編集するのはほぼ不可能ですね。

.block{display:flex;width:100%;background-color:#fff}.block__element{font-size:32px}.block__element span{font-size:16px}

こちら↑がcompressedでアウトプットした際の見た目です。

expandedと比べると可読性がかなり悪く、編集・追記には向きません。

さらにcompressedでは、コメント/* */も消えてしまうので注意してください。

【まとめ】Sassのアウトプット形式は4つ！よく使用するのはexpandedとcompressed

Sassで使用可能な4つのアウトプット形式について説明しました。

4つの中でもよく使うのはexpandedとcompressedです。

どれを使うべきかは案件の納品形式や制作会社のルールなどによって変わってきますので、状況に合わせて使い分けてみてください。