2017.06.22

Atomの「sass-autocompile」でファイルごとにインデント形式を変える方法

Atomの「sass-autocompile」でファイルごとにインデント形式を変える方法

こんにちは、Web事業部のウエノです。

今までCSSを書くときはLessを使っていたのですが、最近Sassに乗り換えました。
Lessよりも出来ることが多くて嬉しい反面、覚えることが増えたので慣れるまでが大変そうです。

普段コーディング時にはAtomエディタを使っており、今回は「sass-autocompile」というパッケージをインストールして簡単にコンパイル出来るようにしました。
複数のインデント形式でコンパイル出来るのがありがたいです。

Lessはファイルの一行目にコメントとしてオプションを指定し、出力する場所やファイル名やMinify化するかどうかなど、ファイルごとにそれぞれ出力方法を変えることができます。

Sassでも同じことができるのですが、検索しても意外と出てこなかったので方法をまとめてみました。

インデント形式の種類

本題の前に、自分自身のメモも兼ねてインデント形式の種類についてご紹介しておきます。
インデント形式はCompressed、Compact、Nested、Expandedの4種類。
下のSassをコンパイルした場合にそれぞれどうなるのか確認してみました。

ul
  margin: 0
  li
    margin: 10px
    a
      color: #000

Compressed
デフォルトの出力名:style.min.css

ul{margin:0}ul li{margin:10px}ul li a{color:#000}

Compact
デフォルトの出力名:style.compact.css

ul { margin: 0; }

ul li { margin: 10px; }

ul li a { color: #000; }

Nested
デフォルトの出力名:style.nested.css

ul {
    margin: 0; }
    ul li {
        margin: 10px; }
        ul li a {
            color: #000; }

Expanded
デフォルトの出力名:style.css

ul {
    margin: 0;
}

ul li {
    margin: 10px;
}

ul li a {
    color: #000;
}

ファイルごとにインデント形式を変える方法

sass-autocompileの設定でインデント形式を設定できますが、デフォルトの設定では Compile files… の項目が「Every SASS file」になっているので、全てのファイルが設定したインデント形式でコンパイルされます。

まずは「Only with first-line-comment」に変更し、Sassを保存してもコンパイルしないように設定。

コンパイルしたいファイルの一行目にコメントでインデント形式を出力します。
この状態でファイルの保存を行えば指定したインデント形式で出力することができます。
一部のファイルのみ、場所やファイル名の形式を変更したい場合にも使えますね。

/* Compressed */
// compileCompressed: $1.min.css

/* Compact */
// compileCompact: $1.compact.css

/* Nested */
// compileNested: $1.nested.css

/* Expanded */
// compileExpanded: $1.css

/* 複数指定 */
// compileCompressed: $1.min.css, compileExpanded: $1.css

また、Sassを複数のファイルに分けたときに便利なオプションがこちら。
現在のファイルを保存した際、メインのファイルも保存してくれます。

// main: 'style.sass'

関連キーワード

この記事を書いたひと

横浜市在住。覚えたことや社内の様子をこのブログで発信しまくっています。

RANKING

今週の人気記事一覧