講師だって、最初は初心者だもの[番外]CSSメタ言語 の LESS <3> 〜ミックスインについて〜/森 和恵

投稿:  著者:  読了時間:7分(本文:約3,300文字)


こんにちは。森和恵です。ようやく春めいてきましたね。

今年の春は、変に寒い天候が続き、桜を見逃した人も多かったのではないでしょうか。私も、嵐でお花見が中止になったりと散々な感じでした(涙)。気候もよくなってきたし、これからお花見できればいいのに...と思う方、関西にお住まいならラストチャンスがありますよ。

大阪には、「造幣局の桜の通り抜け」というお花見行事があります。ここは遅咲きの八重桜が多いため、時期外れの4月中旬から1週間、開催されるんです。※今年は、明日16日(火)から22日(月)の間に行われます。

「通り抜け」という名の通り、造幣局の敷地内を歩きながらお花見をします。多くの人出で賑わうため、ルートを逆行したり、立ち止まることは禁止されています。

宴会したり、三脚立てて写真撮影などは難しいのですが、じっくりとお花を愛でることに集中できるので、私は好きです。ボリュームのある満開の八重桜が迎えてくれるお花見ルートは、絶景です。

今年の桜は「天の川」。新たに加わった桜は、「八天桜(はってんざくら)」・「黄桜(きざくら)」だそうですよ。

 |造幣局 桜の通り抜け:大阪
 < http://www.mint.go.jp/enjoy/toorinuke/sakura-osaka.html >

 |造幣局通り抜け2012:YouTubeムービー
 < >

......と、冒頭ご挨拶の季節ひとネタの後は、お勉強しましょう♪ 今回も、CSSメタ言語 LESSについてお話しします。過去のLESS記事はこちら↓です。

 |LESS〈1〉〜基本のキ、変数と演算について〜
 < http://bn.dgcr.com/archives/20130204140100.html >

 |LESS〈2〉〜セレクタの入れ子について〜
 < http://on.fb.me/YHpJ1Q >
 ※デジクリサイトに未登録のため、Facebookノートで急ぎアップしました。





■LESSの関数<ミックスイン(Mixins)>

さて、3回目になる LESS のお話し。今回は、ミックスイン(Mixins)につい
て勉強しましょう。公式サイト関連で押さえておきたいURLは、以下です。

 |LESS 公式サイト
 < http://lesscss.org/ >

 |LESSのミックスイン
 < http://less-ja.studiomohawk.com/#-ミックスイン >

#余談です。「Mixins」調べると「ミックスイン」と発音・表現するケースが目立ちましたが、英単語的には「ミキシン」と読むらしいです。

さて、始める前に一つだけ思い出しておいてください。LESSコードはそのままではブラウザが理解できないので、LESS → CSS へ変換する必要があります。ここでは、手軽に試せる LESS2CSS を使ってください。左側にLESSコードを入力すると右側で変換されます。

 |LESS2CSS
 < http://less2css.org/ >

さて、ここからが本題です。ミックスイン(Mixins)を見てみましょう。

LESSでは、クラスセレクタを他のセレクタの中に記述して呼び出すことができます。呼び出されるクラスセレクタは、CSSセレクタでもあり、Mixins(ミックスイン:LESSの関数)としても働きます。

<例1>

/* LESS Input */

.myborder{
border:dotted 1px #666666;
padding:5px;
}

.box1{
background:#ffc;
.myborder;
}

/* CSS Output */

.myborder {
 border: dotted 1px #666666;
 padding: 5px;
}

.box1 {
 background: #ffc;
 border: dotted 1px #666666;
 padding: 5px;
}

クラスセレクタ myborder を別のクラスセレクタ box1の中で呼び出しています。こうすることで、クラスセレクタ myborderを「よく使うボーダースタイル」として定義します。

同じイメージで「よく使う文字スタイル」や「よく使うボックスススタイル」......など、サイト内で頻繁に使う共通のスタイルをCSSファイルの冒頭で定義しておけば、スタイル管理が非常に楽にできますね。

ミックスイン、超便利です。

■引数をつけて、クラスセレクタを呼びだす

ミックスインでは、引数をつけて、プログラムでいう関数のような働きをさせることもできます。引数には、「@変数名:値;」で指定するLESSの変数を使います。

では、先程の「myborder」に引数をつけてアレンジしてみましょう。

<例2>

/* LESS Input */

.myBorder(@borderForm:dotted, @borderWidth:1px, @borderColor:#000){
border:@borderForm @borderWidth @borderColor;
border:@arguments;
padding:5px;
}
.box1{
width:500px;
float:left;
.myBorder;
}
.box2{
width:500px;
float:right;
.myBorder(solid, 5px, #0000FF);
}

/* CSS Output */

.box1 {
 width: 500px;
 float: left;
 border: dotted 1px #000000;
 padding: 5px;
}
.box2 {
 width: 500px;
 float: right;
 border: solid 5px #0000ff;
 padding: 5px;
}

「.myBorder」で使った3つの引数は、「@borderForm」をボーダースタイル(初期値 dotted)、「 @borderWidth」をボーダー幅(初期値 1px)、「@borderColor」をボーダー色(初期値 #000)として指定しました。

次に呼び出し側の方を見てみましょう。

クラスセレクタ box1では、「.myBorder」と引数を指定せずに呼び出したので、初期値がそのまま展開時に使われました。クラスセレクタ box2では、「.myBorder(solid, 5px, #0000FF)」と引数の値を指定して呼び出したので、指定した値で展開されています。

このように呼び出すときに値指定をすることで、別の値を指定することもできます。

見過ごしがちな点が一つあります。

引数をつけて定義した「.myBorder」は、LESSのミックスインとしてのみ使用され、クラスセレクタとして、別途出力されませんでした。つまり、引数をつけると単独のクラスとしては、使えなくなることに注意してください。

......ということで、今回は、終わりです。次回はGW明けです。次回は、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 >


著書「Fireworksの教科書」関連の、怒涛のような告知活動の日々がようやく終わりました。USTを含めて一か月で7回も登壇しています。よく乗り切れたなぁ......(自画自賛スミマセン)。下記で、イベントのスライド・動画などを全公開しています。よろしければご覧ください。(^^)

 |Fireworks ニュース:r360studio
< http://r360studio.com/fireworks/ >