【css】Sass output-style(アウトプットスタイル)による違いを確認してみた

スポンサーリンク
css

Sassのコンパイル実行でcssファイルを作成する際の形式を指定する、output-styleによる違いを実際に確認してみました。

参考にした書籍

引き続きこちらを参考にしました

指定方法

指定方法はgulpfile.js内の以下部分で記述していきます。(7行目)

sass({outputstyle: 'ここに指定のアウトプットスタイルを記述'})

output-styleの全量

output-styleは全4種類

  1. nested
    Sassの階層をインデントで残す。ネストされているような見た目でファイルが出力される。デフォルトのスタイルでもある。
  2. expanded
    ルールセットとプロパティを一行ずつ改行した、可読性が高いスタイル。
  3. compact
    セレクタとプロパティがシングルラインになる。ルールセットごとに改行される
  4. compressed
    サイズ軽量化を優先し、インデントや改行を全て取り除いて圧縮する。

元のscssファイル

コンパイル元になるscssファイルは以下で実施

#main {
    background-color: red;
    p {
        font-size: 20px;
        display: inline;
    }
    li{
        margin-top: 30px;
        ul{
            font-size: 20px;
        }
    }
}

Nestedで実行

以下に修正後、コンパイル実行

sass({outputstyle: 'nested'})

結果 ネスト上になってコンパイルされていることを確認

#main {
  background-color: red; }
  #main p {
    font-size: 20px;
    display: inline; }
  #main li {
    margin-top: 30px; }
    #main li ul {
      font-size: 20px; }

expandedで実行

以下に修正後、コンパイル実行

sass({outputstyle: 'expanded'})

結果 元のcssの文法のためみやすい

#main {
  background-color: red;
}

#main p {
  font-size: 20px;
  display: inline;
}

#main li {
  margin-top: 30px;
}

#main li ul {
  font-size: 20px;
}

compactで実行

以下に修正後、コンパイル実行

sass({outputstyle: 'compact'})

結果 ちゃんとセレクタ、プロパティが1行になっている

#main { background-color: red; }

#main p { font-size: 20px; display: inline; }

#main li { margin-top: 30px; }

#main li ul { font-size: 20px; }

compressedで実行

以下に修正後、コンパイル実行

sass({outputstyle: 'compressed'})

結果 全ての記述が1行で記述されている

#main{background-color:red}#main p{font-size:20px;display:inline}#main li{margin-top:30px}#main li ul{font-size:20px}

終わりに

可読性、パフォーマンス、開発者メンバーのSassレベルをそれぞれ考えた上で必要なoutput-styleに設定することが大切だと感じました!
読んでいただきありがとうございました!

css
スポンサーリンク
app crafts

コメント

タイトルとURLをコピーしました