昔のCSSをLessとかSassにしたいの

2013.02.15 | 覚えておきたい |
スポンサードリンク

ども、白です。ホワイトデーは来月です（はい）。

wpd-white-20130215

さて、いろんなデバイスを対象にしたり、ちょっと規模の大きいサイトを作っていくとなるとCSSを書くのも大変です。そんな時は「素のCSSなんて書いてられっか、バカヤロー！（ガラガラガッシャーン）」ってなるので、最近話題の「Less」や「Sass（+Compass）」「Stylus」といったCSSプリプロセッサを使ってテーマのスタイルを作る人もいるでしょう。

新規で作る場合は自分の好きなプリプロセッサを使えばいいし、「Forge」なんていうSass / CoffeeScriptなテーマ開発フレームワークみたいなの（要Ruby / RubyGems）もあるんですが、昔構築したサイトのメンテナンスとかリニューアルの時など、既存のテーマを元にいじらないといけない場合はきっとイライラすることでしょう（笑）。

しかし、世の中には便利なツールを作ってくださる開発者の方がいらっしゃるってもんで、既存のCSSをLessやSass（Scss）、Stylusに変換してしまうサービスやツールがあります。こういったサービスを覚えておけば、昔のCSSをリファクタするのにも一役買いますね。ま、検索すればすぐ見つかるんですが。

→ Css2Less

→ css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

→ Css2Stylus

この辺のサービス、ブラウザからやらなくてもコマンドラインとかでできるので、お好きなプリプロセッサのフォーマットに変換できるのを一個入れておくといいですね。あ、たまにコメントの書き方とかでずっこけたりするのもあるのでその辺はご注意を。

あ、そういえば第4のプリプロセッサ「Roole」ってのも出てますよ。