お店・場所イベントモノサービスアプリWebコンテンツDAILYDAILYのすべての記事お知らせブログ2017.06.22Web制作ツールAtomの「sass-autocompile」でファイルごとにインデント形式を変える方法こんにちは、Web事業部のウエノです。今までCSSを書くときはLessを使っていたのですが、最近Sassに乗り換えました。Lessよりも出来ることが多くて嬉しい反面、覚えることが増えたので慣れるまでが大変そうです。普段コーディング時にはAtomエディタを使っており、今回は「sass-autocompile」というパッケージをインストールして簡単にコンパイル出来るようにしました。複数のインデント形式でコンパイル出来るのがありがたいです。Lessはファイルの一行目にコメントとしてオプションを指定し、出力する場所やファイル名やMinify化するかどうかなど、ファイルごとにそれぞれ出力方法を変えることができます。Sassでも同じことができるのですが、検索しても意外と出てこなかったので方法をまとめてみました。本題の前に、自分自身のメモも兼ねてインデント形式の種類についてご紹介しておきます。インデント形式はCompressed、Compact、Nested、Expandedの4種類。下のSassをコンパイルした場合にそれぞれどうなるのか確認してみました。file」になっているので、全てのファイルが設定したインデント形式でコンパイルされます。first-line-comment」に変更し、Sassを保存してもコンパイルしないように設定。コンパイルしたいファイルの一行目にコメントでインデント形式を出力します。この状態でファイルの保存を行えば指定したインデント形式で出力することができます。一部のファイルのみ、場所やファイル名の形式を変更したい場合にも使えますね。$1.cssまた、Sassを複数のファイルに分けたときに便利なオプションがこちら。現在のファイルを保存した際、メインのファイルも保存してくれます。テキストエディタこの記事を書いたひと株式会社アップシェア新横浜を拠点にしたWeb制作会社、アップシェアです。ホームページ制作、アウトソーシング、マーケティング、スマホアプリの開発など。みんなで一緒に幸せになれる会社を目指しています。upshare.co.,ltd。