SwapSkills (vol.25)「CSSを便利に使うための LESS入門」レポート

この記事を読むのに必要な時間:およそ 3 分

2012年2月18日(土)⁠SwapSkillsの第25回となる「CSSを便利に使うための LESS入門」が大田区産業プラザにて開催されました。LESS(レス)とはCSSの拡張メタ言語で,CSSコードの抽象化(圧縮化)や,コード資産の蓄積と再利用が可能といったプログラミングのメリットをCSSで享受できる仕組みのことです。

CSSによるデザインは既に一般化しており,表現手法の広がりによりデザインの幅も広がっています。一方で,CSSは複数の要素に同じスタイルを適用させるときに,同じスタイルを何度も記載しないといけないといった構造的な問題点が指摘されています。こうしたCSSの弱点を補完し,CSSの制作や管理の効率性を高めるのがCSS拡張メタ言語と呼ばれるものです。LESSの他にも,Sass(サス)などが代表的な拡張言語として知られています。

小久保浩大郎氏による「CSS拡張言語概論」

まず,GoogleでWebマスターを務める小久保浩大郎氏より,⁠CSS拡張言語概論」と題し,LESSやSassに代表されるCSS拡張言語の概要やCSS拡張言語の歴史,それらにどういう違いがあるか,また,実際に使う上でのメリットと注意点などについてセッションが行われました。

まず同氏は,CSS拡張言語が開発されるに至った経緯として,CSSの持つ構造的な問題点につき言及しました。それによると,CSSは意図的にシンプルであるように設計された結果,変数やマクロ定義のようなコードの抽象化・再利用の仕組みを持たない構造である点を挙げました。さらに,設計当初は十分だったシンプルなスペックが,今日のように複雑化したニーズに対して応えきれていない点にも言及します。また,スタイル定義を組み合わせるにはHTML側に複数のクラスを指定するといった対処療法的な解決策を取らざるをえず,後方互換性などの問題に対処するためのクロスブラウザ用のコードなどでCSSの記述が煩雑になり,結果,メンテナンス性が落ちる点などを指摘しました。

一方で,最近までCSS拡張言語はあまり利用されていませんでした。この理由として同氏は,コマンドライン操作や独自の構文の習得など,WebデザイナーやWeb制作者には敷居が高いという点を挙げました。

画像

SassとLESSの歩み

こうした問題点を受け,SassやLESSはどのような考え方のもとに発展してきたのでしょうか。まず,SassはHaml(ハムル)のサブセットとして開発されたという経緯があると同氏は解説しました。Hamlは,RubyによるWebアプリケーションフレームワークRuby on Railsでの利用を主眼としたもので,インデントとCSSセレクタを用いた記述を行うことによって,少ない行数で正しいHTMLを記述できるようにしたマークアップ言語です。Sassは,Hamlと同じようにCSSを記述できるよう,インデントでCSSの構造を記述する言語として開発されました。しかし,独自の構文を覚えなければいけない点が敬遠され,拡張言語としてはあまり利用されることはありませんでした。

一方,LESSは,上記のような問題点を抱えたSassの対案として,CSSに準拠した構文である点を特徴に登場しました。こうした流れを受け,Sass陣営もver.3よりCSS準拠の構文であるSCSS(エスシーエスエス)をリリースしました。LESS陣営は,Webデザイナーでも容易に扱えるよう汎用性を高める方向に舵を切り,コマンドライン不要のMac用GUIクライアントが登場したり,JavaScriptを利用したLESS処理を実装することでソフトのインストールを不要にしたり,Node.jsで動くコンパイラーを公開したりと,より扱いやすさを追求していると同氏は述べました。

LESSはJavaScriptによるブラウザ上での動的変更が特徴

SassやLESSなどのCSS拡張言語の主な機能として,同氏は以下の要素を挙げました。具体的な機能の解説は次セッションに譲るとして,同氏はSassとLESSの機能上の違いについて解説しました。

  1. 変数と演算(variables and arithmetic)
  2. ルールのネスト(nested Rules)
  3. ミックスイン(mixins)
  4. セレクタの継承 ⁠selector inheritance)
  5. for, if などの制御構文

Sassの特徴的な機能は,@extend(エクステンド)という機能です。これは,LESSにはない機能で,一つのスタイルに対して適用したいセレクタを複数適用できるものです。重複する記述が減るのでコードが圧縮でき,メンテナンス性が上がる効果が期待できます。

一方,LESSの特徴的な機能は,JavaScriptによりブラウザ上で動作するため,ブラウザ側で要素を変更したときに動的に変更することができる点です。デメリットとしては,パーサー(構文解析)の機能が弱く,後方互換などブラウザのCSSハックがあるときに,うまくコンパイルできない場合があることです。Sassはコマンドラインで扱うため少々敷居が高いものの,個人的にはSassがおすすめであると同氏は語りました。

CSSにプログラミングの力を

ハックの力によって,CSS制作や管理の効率化ができないかという点について同氏は言及しました。⁠ハッカーとは,5分かかる仕事を5秒で終わらせるために5時間かける人」というエピソードや,Rubyコミュニティーの標語「DRY ⁠Don⁠t Repeat Yourself)⁠を引用しながら,同氏は「めんどうくさいと思う力によって,従来は面倒だった問題を手早く解決する」ことが大事であると語ります。

一方で,CSSは上述したような問題点により,似たような機能を毎回コーディングしないといけないことを防ぐ「抽象化機構」が弱く,⁠DRY」が実現できないと同氏は言及しました。抽象化とは,プログラミングの世界では複雑で重複する処理を減らすこと,またはその仕組みのことを指します。CSSにプログラミングの考え方を導入し,プログラミングによって得られるメリットをCSSでも享受してはどうかと同氏は提唱しました。

CSSの制作や管理の効率性を高めるSassやLESSなどのCSS拡張メタ言語は,WebデザイナーやフロントエンジニアなどCSSを書く人はもちろん,大規模プロジェクトのCSSを設計したり記述したりする立場の人にもメリットがあると同氏は言及しました。最後に,構造が不可逆的である(CSSからLESS,Sassを変更することはできない)ため,クライアントへのファイル管理には気をつける必要があるといった,導入に際しての注意点に触れてセッションは終了しました。

著者プロフィール

SwapSkills

都内でWebプロフェッショナル向けに講座の開催をしているallWebクリエイター塾主催のマンスリー勉強会 。人気No.1の「HTML5+CSS 基礎講座」が4月1日(日)に開催!【現在募集中】

コメント

コメントの記入