LESSでコンパイルされたCSSファイルの見た目を調整する


先日LESSを使用したコーディングの発表?をやって、
これをお仕事に活かさない手はない!と思い、LESSを実際に使用してみましたが…。

コンパイルされたCSS、全然改行されてねえ!
スペースも一切入ってねえ!

うーん、これではメンテナンス性が低過ぎる。
他の子たちはLESSなんてまだまだ使えないし。

とはいえ、よくよくよくよく考えてみたら、テキストエディタで何とでもなる範囲。
(いや、改行やらスペースやらTabやら入れてくれるコンパイラがあったら
ぜひぜひ紹介して欲しいですが。)

というわけで、コンパイラされたCSSの改行やらスペースやらTabを一括で入れる方法。

■TeraPadを使用します。■

1.コンパイルされたCSSファイルをTeraPadで開き、カーソルを一番最初に合わせます。

2.検索→「置換」を選択
このとき、オプションの「\n=改行, \t=TAB, \\=¥(E)」にチェックを入れる

3.「}」まわりを整える。
・検索する文字列 : }
・置換後の文字列 : ;}\n\n
上記の条件で「すべて置換」で全部置換する。できあがったらカーソルを一番最初まで戻す。

4.「{」まわりを整える。
・検索する文字列 : {
・置換後の文字列 :  {\n\t    ←注意:{の前に半角スペースが入ってます。
上記の条件で「すべて置換」で全部置換する。できあがったらカーソルを一番最初まで戻す。

5.「;」まわりを整える。
・検索する文字列 : ;
・置換後の文字列 : ;\n\t
上記の条件で(以下省略

6.「:」まわりを整える。
・検索する文字列 : :
・置換後の文字列 : :       ←注意::の後に半角スペースが入ってます。
上記の条(ry

一応、これでそれらしい形にはなりますよ、っと。
注意するのは、3.と5.の順番を入れ替えると微妙な結果になってしまうコト。
3.で追加した「;」に対して、さらに5.でその内容を書き加えているから。
先に「;」まわりを編集してから「;」を新しく加えると、変な形で完了した形になってしまう。

というか、ホント、どなたか最初から改行されたりスペースが入ってたりTABが
入るコンパイラ、教えてほしーっす。(Windowsで)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.