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ファイルを確認・編集する可能性はなく、何よりファイルの軽量化を重視したい場合に使用。

 

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