Firefox 29、Sass/Less対応CSS開発機能を搭載

MozillaのWebデベロッパーブログに掲載された記事「Live Editing Sass and Less in the Firefox Developer Tools」が、Firefox 29に搭載されている新機能を伝えた。SassやLessを使っている場合でもオリジナルファイルのどこの値が使われているかをトレースできるようになる。

通常のCSSであればFirefoxの開発ツールはCSSのどこの値がその結果をもたらしているかをトレースできるが、SassやLessのように複数のファイルからCSSファイルを生成するようなフレームワームではそれを実施することができない。Firefox 29からは「sass index.scss:index.css --sourcemap」や「lessc index.less index.css --source-map」のようにファイルを生成しておけば元ファイルのどこの値が影響を与えているかをトレースできるようになる。

CSSファイルを通常のCSSファイルとして作成するのではなく、より抽象度を高めて継承的なアプローチをしたり、よりモジュール化された部品として扱いたい場合にはSassやLessといったフレームワークが使われることが多い。Firefox 29が実装した開発機能によって、これまでSassやLessを扱ってきたエンジニアやデザイナが開発ツールの恩恵を受けやすくなる。