このページの本文へ

もっと便利に、効率アップ

CSSの記述が3倍速くなる「LESS」の使い方

2012年02月09日 13時58分更新

斉藤祐也/CSS Radar

  • この記事をはてなブックマークに追加
本文印刷

LESSの開発環境作りはとても簡単

 はじめに紹介したように、LESSには手軽なJavaScriptライブラリーが用意されているので、HTMLのソース内に、「less.js」ファイルと「.less」スタイルシートの呼び出しを追加するだけで使い始められます。

 ただ、本番サイト上でJavaScripに依存しすぎるのは、パフォーマンスとアクセシビリティの点で不安があります。そこで、 .lessファイルを.cssファイルに変換してくれるコンパイルツールを利用し、公開サイトではCSSだけを利用する方法があります。

 LESSの開発に欠かせない無料で使えるGUIツールを紹介しましょう。 紹介するツールはすべて.lessファイルの保存をきっかけに、自動的に.lessを.cssに変換します。

Crunch!

 「Crunch!」は、Adobe AIRを使っているためWindows、Mac、Linuxの環境で動作し、さらにどのツールよりも見た目がおしゃれな点も高く評価されています。

WinLess

 」Windows環境でAdobe AIRよりもWindows専用アプリを使いたい方は「WinLess」。以下に紹介するLESS.appとほぼ同じデザインと機能となっています。

LESS.app

 Macのみで動作する「LESS.app」は、最初に公開されたLESSのGUIコンパイラツール。現在のバージョンも「2.6」と更新頻度が高く、動作も安定している点が高く評価されています。

 GUIツールを利用する場合は、ツールの内部で利用している「less.js」のバージョンに気をつけてください。less.jsは非常にアクティブなプロジェクトのため、頻繁に仕様が更新されています。バージョンの違いによってエラーになってしまうなどの不具合もあります。

LESSについてもっと詳しく知りたい

 LESSの生みの親である cloudhead氏 がメンテナンスしている公式ドキュメントがあります。最新のless.jsもこの公式サイトからダウンロードできます。

 英語が苦手な方のために作者の了解を得て公式サイトを翻訳しました。日本語版のドキュメントはこちらをご覧ください。できるかぎり公式サイトの記述に合わせて翻訳もアップデートしていきますが、最新のドキュメントについては必ず公式サイトを参照してください。

 less.jsの最新のソースコードはgithubにて公開されていますのでこちらも合わせて参照してください。githubはオープンソースのソースコードを無料でアップロードできる環境を提供していて、LESS以外にも便利なソースが公開されていますので参考にしてください。

LESSを使いこなすコツ

 LESSはCSSとほぼ同じ文法で書けますが、それでもやはり覚えなくてはいけないこともあります。まずはドキュメントを辞書代わりにしながら、全部の機能を使うのではなく、現在のワークフローで簡単に導入できる機能から使っていきましょう。新しい言語としてではなく、便利に使える新しいツールとして活用ながら、自分にとって、あるいはチーム全体にとってもっとも効率的な使い方を見つけ出すことが大切です。

 2012年2月18日に、SwapSkillsでLESSについての勉強会を開催します。CSS拡張言語の入門、そしてLESSのドキュメントを元に文法について詳しくお話します。ここで紹介したツールの使い方などもTipsとして紹介する予定です。ご興味のある方はLESSを利用するきっかけとしてぜひご参加ください。

SwapSkills(25)
CSSを便利に使うための LESS入門

日時
2012年2月18日(土)13:30 ~ 16:00
主催
allWebクリエイター塾
スピーカー
小久保 浩大郎 (Google)
斉藤祐也 (サイバーエージェント)
参加費
3500円(税込)
詳細/申込み
http://swapskills.info/month/25.html

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く