【Sass(SCSS)】sass-autocompileで出力するインデント形式を指定する方法

こんにちは、Ryohei（@ityryohei）です！

Atomのsass-autocompileでsass(SCSS)ファイルをコンパイルする際にインデント形式を指定する方法のご紹介です。

sass(SCSS)ファイルをコンパイルしてcssファイルを出力する際に、改行やスペースを除いた状態で出力したり、逆に改行やスペースを残したり等を指定することができます。

本記事では、Atomのsass-autocompileでsass(SCSS)ファイルをコンパイルしてcssファイルを出力する際に、インデント形式を指定する方法を解説しています。

出力するインデント形式を指定する方法
Compressed
Compact
Nested
Expanded

では、解説していきます。

出力するインデント形式を指定する方法

Atomのsass-autocompileで出力方法を指定は、sass(scss)のソース内の一番上の行に記載します。

//ここに出力形式を記載

~ここからスタイルを定義~

※本記事でご紹介するサンプルでは、すべてのサンプルソースの一行目に出力形式を指定しております。

Compressed

Compressedは、コンパイル時にすべての改行やスペースを取り除いてスタイルに関係する文字列のみをCSSファイルに出力します。一般的にファイルの末尾に「min」がついている状態となります。

Sass(SCSS)

//compileCompressed

#box {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;

  h1 {
    font-size: 1.25em;
  }

  table {
    display: table;
    width: 100%;
    border-collapse: collapse;

    tbody {

      tr {

        th {
          width: 25%;
        }
        td {
          width: 75%;
        }
      }
    }
  }
}

コンパイル結果

#box{width:100%;max-width:1000px;margin:0 auto}#box h1{font-size:1.25em}#box table{display:table;width:100%;border-collapse:collapse}#box table tbody tr th{width:25%}#box table tbody tr td{width:75%}

Compact

Compactは、コンパイル時にプロパティ間の余分な改行やスペースを取り除いてCSSファイルに出力します。目視でも内容が理解できる見やすい形式となります。

Sass(SCSS)

//compileCompact

#box {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;

  h1 {
    font-size: 1.25em;
  }

  table {
    display: table;
    width: 100%;
    border-collapse: collapse;

    tbody {

      tr {

        th {
          width: 25%;
        }
        td {
          width: 75%;
        }
      }
    }
  }
}

コンパイル結果

#box { width: 100%; max-width: 1000px; margin: 0 auto; }

#box h1 { font-size: 1.25em; }

#box table { display: table; width: 100%; border-collapse: collapse; }

#box table tbody tr th { width: 25%; }

#box table tbody tr td { width: 75%; }

Nested

Nestedは、Sass(SCSS)のネストを維持した状態でCSSファイルを出力します。

Sass(SCSS)

//compileNested

#box {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;

  h1 {
    font-size: 1.25em;
  }

  table {
    display: table;
    width: 100%;
    border-collapse: collapse;

    tbody {

      tr {

        th {
          width: 25%;
        }
        td {
          width: 75%;
        }
      }
    }
  }
}

コンパイル結果

#box {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto; }
  #box h1 {
    font-size: 1.25em; }
  #box table {
    display: table;
    width: 100%;
    border-collapse: collapse; }
    #box table tbody tr th {
      width: 25%; }
    #box table tbody tr td {
      width: 75%; }

Expanded

Expandedは、コンパイル時に一番書き慣れた形式でCSSファイルを出力します。おそらくこちらがデフォルトの出力かと思います。

Sass(SCSS)

//compileExpanded

#box {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;

  h1 {
    font-size: 1.25em;
  }

  table {
    display: table;
    width: 100%;
    border-collapse: collapse;

    tbody {

      tr {

        th {
          width: 25%;
        }
        td {
          width: 75%;
        }
      }
    }
  }
}

コンパイル結果

#box {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#box h1 {
  font-size: 1.25em;
}

#box table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

#box table tbody tr th {
  width: 25%;
}

まとめ

最後に、Atomのsass-autocompileで指定することができる出力形式をまとめます。

Compressed	すべての改行やスペースを除いて出力
Compact	プロパティ間の改行を除いて出力
Nested	ネストを維持した状態で出力
Expanded	標準的なCSSファイルの状態で出力