SassのoutputStyleについて徹底解説【全4種類】
Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ
※本サイトはアフィリエイト広告を利用しています。
【SassのoutputStyleについて知りたい人】
「Sassをコンパイルした際の、CSSの書き出し方の種類（outputStyle）にも色々あるみたい。どんなものがあるのか知りたいなぁ。」
こういった疑問に答えます。
本記事の内容
- SassのoutputStyleを徹底解説【全4種類】
- outputStyleの使い分け
この記事を書いている僕は
過去にWeb制作会社で
エンジニアとして勤務しており、
そこで日頃からSassを扱っていました。
今回はそんな僕が、
outputStyleの
『種類』や『特徴』、
それぞれのスタイルの
『使い分け』について
解説していきたいと思います。
SassのoutputStyleを徹底解説【全4種類】
見出しの通りですが、
CSSの書き出し方には
全部で下記の4種類があります。
- nested
- expanded
- compact
- 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ファイルを確認・編集する可能性はなく、何よりファイルの軽量化を重視したい場合に使用。
基本的には
上記の使い分けで問題ないですが、
最終的には
ご自身の状況にあったスタイル
を選択するようにしてください。
