こんにちは、Web事業部のウエノです。 今までCSSを書くときはLessを使っていたのですが、最近Sassに乗り換えました。 Lessよりも出来ることが多くて嬉しい反面、覚えることが増えたので慣れるまでが大変そうです。 普段コーディング時にはAtomエディタを使っており、今回は「sass-autocompile」というパッケージをインストールして簡単にコンパイル出来るようにしました。 複数のインデント形式でコンパイル出来るのがありがたいです。
Lessはファイルの一行目にコメントとしてオプションを指定し、出力する場所やファイル名やMinify化するかどうかなど、ファイルごとにそれぞれ出力方法を変えることができます。
Sassでも同じことができるのですが、検索しても意外と出てこなかったので方法をまとめてみました。インデント形式の種類
本題の前に、自分自身のメモも兼ねてインデント形式の種類についてご紹介しておきます。 インデント形式はCompressed、Compact、Nested、Expandedの4種類。 下のSassをコンパイルした場合にそれぞれどうなるのか確認してみました。 [css] ul margin: 0 li margin: 10px a color: #000 [/css]Compressed デフォルトの出力名：style.min.css
[css] ul{margin:0}ul li{margin:10px}ul li a{color:#000} [/css]Compact デフォルトの出力名：style.compact.css
[css] ul { margin: 0; } ul li { margin: 10px; } ul li a { color: #000; } [/css]Nested デフォルトの出力名：style.nested.css
[css] ul { margin: 0; } ul li { margin: 10px; } ul li a { color: #000; } [/css]Expanded デフォルトの出力名：style.css
[css] ul { margin: 0; } ul li { margin: 10px; } ul li a { color: #000; } [/css]ファイルごとにインデント形式を変える方法
sass-autocompileの設定でインデント形式を設定できますが、デフォルトの設定では Compile files… の項目が「Every SASS file」になっているので、全てのファイルが設定したインデント形式でコンパイルされます。
コンパイルしたいファイルの一行目にコメントでインデント形式を出力します。 この状態でファイルの保存を行えば指定したインデント形式で出力することができます。 一部のファイルのみ、場所やファイル名の形式を変更したい場合にも使えますね。
[css] /* 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 [/css]また、Sassを複数のファイルに分けたときに便利なオプションがこちら。 現在のファイルを保存した際、メインのファイルも保存してくれます。
[css] // main: ‘style.sass’ [/css]