講師だって、最初は初心者だもの［番外］CSSメタ言語 の LESS〈1〉〜基本のキ、変数と演算について〜
── 森　和恵 ──

●LESS の〈変数〉

LESSを使えば、CSSのルールを拡張して、記述に便利な機能を追加することができます。今回は、前回も少し紹介した「変数（Variables）」について考えてみましょう。

LESSでは、「@変数名：値;」を使って、値を変数として定義できます。変数名は、先頭に@をつけて任意の文字列（アルファベット・数字・ハイフンなどの組み合わせ）を指定します。

カラーコード・数値など、使用頻度の高い定番の値を変数定義しておけば、CSSセレクタに個別にカラーコードを書かずに指定ができます。

例1■テーマカラーの定義

私のサイトでは、水色（#abf1e7）がメインカラーです。いろんなところで使うので、変数@r360Colorに定義しました。下記のコードでは、ページ背景色（bodyセレクタ）や囲み枠の線色（#contentsセレクタ）の2か所で変数@r360Colorを利用しています。

/* LESS Input */

@r360Color: #abf1e7;
body { background : @r360Color; }
#contents { border : solid 1px @r360Color; }

/* CSS Output */

body {　background: #abf1e7;}
#contents {　border: solid 1px #abf1e7;}

公式サイトでの変数の説明は、以下のようにあります。

『変数は広範囲で利用している値を1ヶ所で定義することができ、その値をスタイルシート内で再利用することができます。これにより全体の変更を1行のコードの編集で行うことなうことができます。』

今回のように、変数@r360Colorでよく使うカラーを定義しておけば、「えっと、テーマカラーのコードは何番だったかな？」などと考えなくても、変数でカラーを覚えてしまい、どこにでも『再利用』することができますし、「そろそろ飽きてきたのでテーマカラーをピンク（#f1acc8）に変えようかな？」となんて面倒なことを思いついてしまった時にも、「@r360Color: #f1acc8;」と定義している1か所を変更するだけでOKです。つまり『全体の変更を1行のコードの編集で行うことなう』ことができます。楽ちんです。

例2■カラー・ボーダー・フォント......など、あらゆるものを定義する

/* LESS Input */

@r360Color: #abf1e7;
@r360Border: solid 5px @r360Color;
@r360Font:"ＭＳ ゴシック";

body { background:@r360Color; font-family:@r360Font; }
#contents { border:@r360Border; }


/* CSS Output */

body {　background: #abf1e7;　font-family: "ＭＳ ゴシック";}
#contents {　border: solid 5px #abf1e7;}

この例では、変数をさらに進化させて、変数@r360Borderでよく使うボーダーを、変数@r360Fontでよく使うフォントを......というように、徹底的に変数を使って定義してみました。

ここでの注目ポイントは、変数@r360Borderでみられるように、値はどこまで指定してもOKということです。「@r360Border: solid 5px @r360Color;」というように、ボーダーの指定から、形状（solid）、太さ（5px）、カラー（@r360Color）とまとめて定義に入れてしまってもOKです。また、カラーで見られるように変数を定義の中で使うこともできます。

●LESSの〈変数を演算〉

数字、色、変数に演算をすることもできます。演算とは、四則計算のことですね。足したり（＋）、引いたり（-）、掛けたり（*）、割ったり（/）することができます。また、カラーを演算するための命令も準備されていて「lighten(変数, 10%)」と書くと10％明度が高く計算されます。

　　LESSの演算
　　< http://less-ja.studiomohawk.com/#-演算
>

例3■

先の例でのボーダー指定から、変数@r360BorderSizeを使ってボーダーの太さだけを別で定義し、変数@r360BorderSizeBoldでそれに10を加えています。また、ボーダーカラーにlighten(@r360Color, 10%)を使い、テーマカラーを基準により明るい色に変更しています。

/* LESS Input */

@r360Color: #abf1e7;
@r360Border: solid lighten(@r360Color, 10%);
@r360BorderSize: 5px;
@r360BorderSizeBold: @r360BorderSize+10;

#contents { border:@r360Border @r360BorderSize; }
#main { border:@r360Border @r360BorderSizeBold; }


/* CSS Output */

#contents {　border: solid #d7f8f3 5px;}
#main {　border: solid #d7f8f3 15px;}

と、ここまでくれば、まるでプログラミングをしているような感覚に陥りますが、注意がひとつ。LESSの変数は、定義した後から値を変化させることができないので、変数というよりは定数と考えたほうがいいかもしれません。

例えば、プログラムにおける変数のように、右辺で計算をして変数に再度代入するなんてことはできません。「@r360BorderSize: @r360BorderSize+10;」こんな風に書くとエラーになります。

ということで、今回はLESSの変数についてご紹介しました。次回は2月中頃です。更にLESSのネタを続けていきますね。
ではまた！（＾θ＾）

※記事へのご意見・ご要望は下記より受付ます。
< http://bit.ly/gIHFfu
>

【森和恵 r360studio　〜 Web系インストラクター 〜】
< site: http://r360studio.com
>　
< twitter: http://twitter.com/r360studio
>
< mail: r360studio@gmail.com >
< サイト制作の教科書 r360study: http://www.facebook.com/r360study
>

昔、上司に「あなたは、言葉尻だけは丁寧に頼んでいる風に見えるけど、最終的には自分の思うように無理やり相手を動かすふしがあるので、言動に注意してね」と言われたことがある。自分の意見は通すけど、相手の意見を頭から無視していた風に見えたのでそう注意されたのでしょう。

たしかに、若い時は「自分が正義だ！」とか馬鹿な勘違いをしていたと思います。三つ子の魂なんとやら......とあるように、本性から変えることは無理だろうけど、それからは注意してきたつもりです。

そのツケがまわり回ったのか、いま自分が相手にそんな感じの応対をされてて、「ああ、これが上司に言われていた状態かなぁ......。たしかに、嫌な気分になるし、信頼関係は生まれないよね」と改めて思い知らされています。当事者の立場になって、改めて反省中。

さて、最後に告知を。LESS便利だなと思った方はぜひぜひ。

　　Twitter Bootstrap活用入門（2月23日）
　　< http://www.sansokan.jp/events/eve_detail.san?H_A_NO=14923
>
　　はじめてのLESS入門（3月16日）
　　< http://www.sansokan.jp/events/eve_detail.san?H_A_NO=14926
>