CSS

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記述ルールに沿うように変換したい、といった場合に重宝します。

HTML5を導入した制作の依頼・ご質問など、お気軽にお問合せください

※(株)インフォマークのお問合せフォームへ移動します。