SassのoutputStyleについて徹底解説【全4種類】

【SassのoutputStyleについて知りたい人】

 

こういった疑問に答えます。

本記事の内容

• SassのoutputStyleを徹底解説【全4種類】
• outputStyleの使い分け

この記事を書いている僕は 過去にWeb制作会社で エンジニアとして勤務しており、 そこで日頃からSassを扱っていました。

今回はそんな僕が、 outputStyleの 『種類』や『特徴』、 それぞれのスタイルの 『使い分け』について 解説していきたいと思います。

SassのoutputStyleを徹底解説【全4種類】

見出しの通りですが、 CSSの書き出し方には 全部で下記の4種類があります。

1. nested
2. expanded
3. compact
4. compressed

outputStyleの種類①：nested

まず、 nestedの書き出され方が 下記のようになります。

 

body {
  color: gray; }
  body p {
    color: black; }

 

こちらのスタイルですが、 Sassの階層をインデントで残すため、 ネストされているような見た目 になるのが特徴です。

ちなみにこちらが デフォルトのスタイルなので、 gulpfile.jsに何も指定しないと この形式で書き出されます。

outputStyleの種類②：expanded

次に、 expandedの書き出され方が下記です。

 

body {
  color: gray;
}

body p {
  color: black;
}

 

最もよく見かける 可読性の高いスタイルです。

outputStyleの種類③：compact

compactの書き出され方が下記です。

 

body { color: gray; }

body p { color: black; }

 

セレクタとプロパティが1行 になっているのが特徴です。

outputStyleの種類④：compressed

最後に、 compressedが下記のとおりです。

 

body{color:gray}body p{color:black}

 

ファイルのサイズの軽量化を優先し、 インデントや改行をすべて取り除いたスタイルです。

通常のCSSのコメントも削除されます。

outputStyleの使い分け

ここまで4つのスタイルをみてきて、

   

と思われた方もいると思います。

結論、 下記の使い分けがおすすめ。

• nested, compact → 基本的に使わない。
• expanded → 後々、CSSファイルを確認・編集する可能性がある場合に使用。
• compressed → CSSファイルを確認・編集する可能性はなく、何よりファイルの軽量化を重視したい場合に使用。

 

基本的には 上記の使い分けで問題ないですが、 最終的には ご自身の状況にあったスタイル を選択するようにしてください。