Sassファイルでの記述位置を知るより美しい方法

公開

先日Twitter上で知ったリソース「Developing with Sass and Chrome Developer Tools」を読ませてもらったところ（というより流し見た感じ）、Sass 3.3.0ではSourcemapを出力する機能があることを知りました。これが上手く利用できれば、CSSファイルを汚さずSassファイル名と行数を知ることができそうです。そこで早速Sass 3.3.0をインストールして試してみました。

普段は下記でつぶやいたサイトを参考に、Sassの--debug-infoフラグをオンにしてデバッグ情報を出力するようにしていますが、この場合各セレクタの上に都度デバッグ情報が出力されるので、公開ディレクトリにアップする際は再度コンパイルしてデバッグ情報を出力しないCSSを生成しなければならず、手間だなと最近思っていました（gruntのタスクを走らせるだけですが）。これが解決できたら嬉しいなと期待をした次第です。

Google Chrome CanaryでSassファイル上の行数が表示された

Google Chrome(25.0.1364.172)だとCSSファイル上の行数が表示されたので「まだダメなのか...」と思ったのですが、Google Chrome Canary Build(27.0.1452.0 canary)だとSassファイル名と行数が見事表示されました。
Google Chrome Canary BuildのDeveloper Toolの表示例

コンパイルは、次のように--sourcemapオプションを付加するだけです。

$ sass --sourcemap --watch htdocs/_scss/base.scss:htdocs/common/css/base.css

コマンドラインには、CSSファイルと共にソースマップファイルが生成されたことが表示されます。
コマンドラインの処理結果表示

CSSファイルは、最終行にソースマップファイルへのパスがコメントで記述されていました。デバッグ情報の出力に比べると、圧倒的に綺麗かと思います。

.hdg-l1-01 {
 color: #c00; }

/*@ sourceMappingURL=base.css.map */

Sass 3.3.0のインストール方法

Sass 3.3.0は下記コマンドでインストール可能です。まだ正式版ではないのでご注意下さい。

$ gem install sass --pre

Google Chromeの設定方法

デバッグ情報を利用するパターンと同一ですが、初めての方もいらっしゃるかもしれないので簡単に記しておきます。

  1. アドレスバーにchrome://flags/を入力し、試験運用機能の設定画面を開きます。
  2. 下の方に「デベロッパー ツールのテストを有効にする」があるので、「有効にする」をクリックします。
    試験運用機能の設定画面
  3. Chromeを再起動します。
  4. Developer Toolsを開き、右下のSettingsボタン（ギアのアイコン）をクリックします。そして、Sources内のEnable source mapsにチェックを入れます。
    Developer Toolsの設定画面1
  5. 続けてExperimentsの中のSupport for Sassにチェックを入れます。
    Developer Toolsの設定画面2
  6. Chromeを再起動します。

Compassでは...？

sass_options = { :sourcemap => true }と書けば上手くいきそうですが、ソースマップファイルが出力されません。compass compileのオプションにsourcemapが無いからでしょうか。Sourcemap support · Issue #1108 · chriseppstein/compassで議論されているようなので、今後に期待したいと思います（私は最近Compassのmixinはほとんど利用していない気がするのでこれを待たずに...？）。

2013年3月27日追記

私のようにHelpers...例えばinline-image()だけの利用であれば、次のように--compassオプションを付けたコマンドを実行することで、ソースマップファイルを出力しつつCompassのヘルパーも利用するといったことができました。

$ sass --sourcemap --compass --watch htdocs/_scss:htdocs/common/css

おわりに

やはりGoogle ChromeのDeveloper Toolsは強力ですね。普段はFirefox+FireSassで見ているのですが、やはりChromeに移行しようかと思案し始めました。Firefoxもバージョン22で開発ツールが結構良い感じになっていますが、ソースマップ対応はまだでしょうか。期待しています。