Mobile Study: CSS初心者に向け、「LESS」を学ぼう

1.LESSとは

　LESSは英語で「少なく」といった意味です。CSSをシンプル（少なく）に効率よく書くためのもので、CSS拡張メタ言語の１つです。

　では、CSS拡張メタ言語では何ができるのでしょうか？

変数
ミックスイン
入れ子ルール
関数と演算

　「あれ!? プログラミングみたいだね……？」そう!? そうなんです!! プログラミング的処理をCSSの記述に使用できるのです。プログラミングでいう「変数」や「関数」などが使用できるので、プログラミング的要素を取り入れて、効率的にCSSを記述することが可能になります。

2. LESSの特徴

プログラミング的なコーディングでCSSを記述できる
JavaScriptでシンプルなコードを記述することが可能
JavaScriptで記述したコードをCSSファイルへ変換可能（※アプリケーションを使用）
node.jsでのサーバーにインストールすれば利用も可能（※コマンドライン使用）

3. LESSを使う準備

　では、さっそくLESSを使ってみましょう。

■less日本語サイトURL

http://less-ja.studiomohawk.com/
（本家英語サイトの方はバージョンが最新のようです）

■3.1.上記URLより「LESS」ライブラリをダウンロード。
■3.2.ダウンロードした「LESS」ライブラリを使いたいディレクトリに移動。
■3.3.index.html と同階層で使用している例が以下です。
■3.4.「 style.less 」というCSSファイルを作成してください。これは、「style.css」と同様の意味になります。つまりは、「LESS」ライブラリを使用する場合にはCSSファイル拡張子を「.less」にする必要があるということです。
■3.5.　index.html （lessライブラリを使うHTML）にはCSSと同じようにlinkタグから「.less」ファイルを呼び出す「rel="stylesheet/less"」となる点に注意してください。
★記述イメージ

「style.less」を読み込んだ後に「less-1.3.0.min .js」を呼び出します。
※ style.lessにはLESS文法で書いたCSSを記述しています。

4.LESSを使ってみよう

■4.1.変数

　変数は好きな変数名を作ることができ、一定期間にわたって値を保存できます（基本的には使い方に意味がある変数名にすること）。接頭辞に「@」が記述されているのが変数となり「：（コロン）」をまたいで値を記述します。
■LESSを使用した場合
例）@変数名：値;
@color : #ffffff;

@color: #ffffff;　　　　←@colorという変数に#ffffffを代入
@bgcolor: #000000;

#header {
color: @color;
background-color: @bgcolor;
}
#footer {
color: @color;
background-color: @bgcolor;
}

■CSSに置き換えると（LESSは自動でCSSに変換してくれます）

#header {
color: #ffffff;
bgcolor: #000000;
}
# footer {
color: #ffffff;
bgcolor: #000000;
}

　変数を使うとCSS全体で同じ変数名（同じ値）を共通で使用できるため、テキスト・背景色など変数（@＊＊＊）に持たせることで、毎回「例) #000000;」など記述する必要がありません。「＠変数名」などで、用途に合わせて記述し、視認性・再利用性を高められます。

■4.2. ミックスイン
　「変数は１つの値」だけを保持するのに対し、ミックスインはCSSでいう "class","id"のCSS定義したブロック内を全て保持できます。つまり端的な例でいえば、CSSファイル内に"mainクラス"が定義されているとして、"mainクラス内全てのプロパティと値"を保持できます。プログラミングでいえば、関数のようなもので、他のブロック（クラス）へ埋め込め（関数を呼び出す）ます。またミックスインは、下記の例のように、関数と同じく引数(初期値)を設定できます。
※ 引数（初期値）の説明は、以下サンプルコードの次に記載しています。

■LESS記述

.boxradius (@radius: 10px) { ← ミックスイン宣言（引数:初期値）
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.boxradius;
}
#footer {
.boxradius(30px);
}
　他のブロックから呼び出すには、上記サンプルのように行います。
■CSSに置き換えると（LESSは自動でCSSに変換してくれます）

#header {
-webkit-border-radius: 10px;
border-radius: 10px;
}
#footer {
-webkit-border-radius: 30px;
border-radius: 30px;
}

　宣言箇所にある".boxradius (@radius: 10px) "の "@radius: 10px"は、"変数名 : 値"です。この「@radius」変数は ".boxradius" の範囲内だけで使用できます。また、"@radius: 10px" の10pxは初期値ですので、別のブロック（クラス）から" .boxradius(30px); "と呼び出されてると、30pxが引数で代入されるため、初期値の10pxから30pxに上書きされてしまいます。逆に何も渡さない".boxradius;"のような記述をすると初期値が反映され10pxがそのまま入る仕組みです。

■４.３.入れ子ルール
　通常CSS記述では、「#header>p」の子に対してスタイルを適用する場合、全てのセレクタが「#header>p」から記述する必要があります。しかしLESSを利用すると入れ子の記述方法で視認性やメンテナンス性を高められます。
　以下「LESS記述」のサンプルコードでは、「#header」ブロック内で「p」を定義しています。LESSを使うことでの以下のメリットがあります。
何度も「#header>p」を記述しなくていい
入れ子、ブロック内での記述のため視認性が非常に高い
視認性が高いので、メンテナンス性も良い
■LESS記述

#header {
h1 {
    font-size: 10px;
}
p { font-size:5px;
    a { text-decoration: none;
       &:hover { border-width:10px }
    }
}
}
■CSSに置き換えると（LESSは自動でCSSに変換してくれます）

#header h1 {
font-size: 10px;
}
#header p {
font-size:5px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width:10px;
}

■４.４.関数と演算
関数
　LESSにはLESS独自の関数が存在し「カラー関数」や「Math関数」などがあります。
　以下サンプルソースコード内の「border-color: desaturate(@red, 10%);」のdesaturate(@red, 10%);が「カラー関数」です。このdesaturate(@red, 10%)は、" @redから10%の彩度を削減した値を返す"という意味の処理になります。他にもたくさんあり、"LESS公式サイト"にて確認できます。
参照URL： http://less-ja.studiomohawk.com/#docs

演算

　演算は、色や数値の値に対して足し算、引き算、割り算、掛け算を行えます。プロパティ間に複雑な関係性を持たせることができ、値の操作を自由にできます。

■LESS記述

@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%); //LESSのカラー関数
}

■CSSに置き換えると（LESSは自動でCSSに変換してくれます）

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

5.「CSS」ファイルに変換するアプリ

　アプリを利用することで、LESSで書いたものを、CSSに書き出すことができます。そうすることで、通常通りの「HTML＋CSS」の図式で、ブラウザ表示できます。実際にLESSからCSSファイルに変換するアプリは結構あるようで、今回使ってみたのは以下のアプリです。
　Crunch　（LESS専用エディター） http://crunchapp.net/
　CrunchはAIR（AdobeAIR）で作成されています（Mac、Windows 動作可能）。

　特徴は以下の通りです。
赤枠内のようにサイト管理機能（Websiteプロジェクト単位）で修正可能。
Websiteプロジェクト内で、「.css」「.less」のみ選択可能。
エディター機能装備。
CSSファイルを書き出す際に文法をチェックし、エラーがあれば教えてくれます。
青枠内のボタンをクリックでlessで記述した内容が「CSS」ファイルで生成されます。
　非常にシンプルで使いやすいですね。個人的には気に入ったのでご紹介させていただきました。デバッグ＆作成作業中でも"1クリック"でCSSファイルを生成できるのでそこもいいところでしょうか。

Mobile Study

2012年5月24日木曜日

CSS初心者に向け、「LESS」を学ぼう