- Technology & Technique Output Blog -

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

Web制作・プログラミング

※本サイトはアフィリエイト広告を利用しています。

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

考える人

 
「Sassをコンパイルした際の、CSSの書き出し方の種類(outputStyle)にも色々あるみたい。どんなものがあるのか知りたいなぁ。」

 

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

本記事の内容

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

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

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

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

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の使い分け

outputStyleの使い分け

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

 

疑問に感じる女性

「ぶっちゃけどれを使えばいいの?」

 

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

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

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

 

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

Tweet Facebook

関連記事

スキル学習に関する記事