Sassで出力したCSSの整形
制作時はSassでCSSを設計するが、公開(納品)後の運用環境ではSassが導入されていないケースがあるかと思います。
そのような時はSassをexpandedのスタイルで出力する事で、ある程度可読性の高いコードで出力されますが、インデントや改行位置を規定のCSS記述ルールに調整したいと思うことがありました。
そこで、実現出来ないかと探したところ、普段利用しているGrunt.jsのプラグイン(grunt-csspretty)にてほぼ理想通りの事が実現可能でした。
使用方法・オプションについて
詳細は作者(@_hideki_aさん)のブログ(Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開)で解説されているため割愛しますが、
インデントを半角スペース4つに変換する方法を例に備忘録を兼ねて紹介します。
- インストール
-
npm install --save-dev grunt-csspretty
- gruntfile.coffeeの設定
-
下記は単一のCSSファイルを上書きして変換する場合の例になります。
作者が推奨されるように、expandedのスタイルで出力したCSSをベースにすると良いと思います。grunt.initConfig csspretty: public: options: map: true decl: // CSSプロパティ名の前(インデント)を半角スペース4つに before: '\n ' atRule: // @規則内のインデントを半角スペース4つに indent: '' // 複数のセレクタを列挙する場合、1セレクタ毎に改行 selectors: 'separateline' src: 'htdocs/common/css/base.css' require( 'matchdep' ).filterDev( 'grunt-*' ).forEach( grunt.loadNpmTasks )
- ソースマップの出力について
- options.map: true にてソースマップの出力が可能。
grunt-cssprettyの良いと感じた点
オプションが豊富に提供されていますが、一部を除いて初期値が「なし」なこと。
これはオプションを指定していない場合、元のCSSファイルのフォーマットがそのまま出力される事を意味しますが、
基本はSassをexpandedのスタイルで良いが一部だけ規定のCSS記述ルールに沿うように変換したい、といった場合に重宝します。