Skip to content →

普通のCSSをLESSに変換する

デバイスの多様化が進んでいる現在、さまざまな環境にあわせてWebサイトの見た目を調整するとなると(それが良いか悪いかはさておき)、CSSの編集・管理がだいぶ煩雑になってきます。これまでもレイアウト用のCSS、フォントのCSSなどなど切り分けて作業するということはありましたが、ページの表示速度の最適化の面からもばらけているのはあまりよくありません。

サイトの情報構造が複雑化すれば、そこにどのようなスタイルが適用されていて、他のスタイルがどう作用してるかもわかりにくいものです。「ご利用は計画的に」って言葉もあるぐらいですから、最初からきちんと設計しておくのが良いですね。そういうところもあって、最近これまで以上にLESSやSassといった「CSSプリプロセッサ」の話題を目にすることが増えてきました。

既存のスタイルをLESSにする

LESS、Sass/SCSS、CompassにStylusと、CSSプリプロセッサに分類されるものはいくつかありますが、今回は既にあるCSSをLESSにする方法を。世の中には便利なツールを作って広く公開してくださる方々がいらっしゃいますので、深々とお辞儀しながらその力を借りましょう。

実は「Css2Less」というWebサイトにそのコンバータが用意されています。もちろんココのウィンドウにCSSを貼り付けて変換するというのもひとつの方法ですが、いちいちブラウザを開いてどうこうするのもまぁ面倒。そこでこれをターミナルを使ってコンバートする方法を紹介しましょう。対象はOS Xの人(*1)。

ターミナルを開いてRubyのGemとして公開されている「css2less」をインストール

gem install css2less

インストールはすぐ終わるので、終わったら変換するCSSをLESSに変えます。

css2less style.css >> style.less

簡単ですね。

ただし、ひとつ注意点があって、@mediaな感じでCSSの内部でMediaQueryとか使われているとおかしなことになります(あと1ラインじゃないコメントとかも)。その部分は、個別のCSSとしてあらかじめ分けておいてLESS化するのが良いようです。分割したとしても、LESSをコンパイル(CSSに変換処理)する時に最終的にひとつにまとめればいいだけの話ですからね。

LESSやSassのコンパイルもターミナルからやってもいいのですが、そこはそれの準備が必要(大したことじゃないけど)。環境が用意できない方は、「Crunch!」「SimpLESS」「LiveReload」「CodeKit」みたいなGUIでいけちゃうツールもありますから、そちらで。他のツールについては、またの機会に紹介しましょう。

「CSSプリプロセッサってなんぞ?」「何それおいしいの?」って方は、来年初頭にCSS Niteで特集イベントが開催されるようですので、こちらに参加されると良いかもしれません。

(追記)Sassな方には「css2sass」ってサイトもあるみたいですね。

*1: 最近のOS Xは、標準でRuby On Railsが動く環境になってるはずなので。自分のマシンで動くかどうか確認したいのなら、ターミナルを開いて「which gem」と打ってリターンしてみてください。インストール先が表示されたら大丈夫。

Published in articles