あかつきのお宿

もう何年前になることやら、調子こいて「less.jsイケてるじゃーん。みんなも使おうぜー」とかほざいてたことがありました。

ユー、プログラマならless.js使ってcss書いちゃいなよ

あの当時は本当にこれ結構便利かもなんて思ってたんですが、気がついたら使わなくなっていました。まあ、よくあるよね。

でも久しぶりに触る機会があったので、その際に気になったことを一つ。

CSSのcalc

まずは前置きから。

CSS3に「calc()」ってのがあります。calculation（計算）の略だと思うんですが、そのものズバリ、計算によって縦横の長さなんかを指定できるというものです。

使い方によってはなかなか重宝できると思います。

<div class="col">テキスト</div>
<div class="col">テキスト</div>
<div class="col">テキスト</div>

<style>
.col{
  float:left;
  width:calc(100% / 3);
}
</style>

例えばこんな風に書けば、キレイにボックスを三分割できます。通常なら「33%」とか書いて100%を正確に三等分できなかったりする場合でも、これでバッチリですね。

全てのブラウザで使えるわけではないですが、まあ、モダンなブラウザならだいたいOKでしょう。IEとかはもう知らん。

あとブラウザによってはベンダープレフィックスってやつをつけないと適用されないかもしれないので、ちょい面倒ですが、こんな風に書いとくと良いかもしれません。

.col {
  width:calc(100% / 3);
  width:-webkit-calc(100% / 3);
  width:-moz-calc(100% / 3);
}

単位の違うもの同士も計算できる

このcalcが便利だな〜って思うのは、単位の異なるものでも計算可能ってとこですね。

width:calc(100% - 50px);
width:calc(10em + 100px);

こんな指定も可能です。個人的には100%から任意のピクセルだけ引けるところとか、イケてるなって思います。レスポンシブなレイアウトで、左側に配置した画像の大きさは固定で右側の文章だけ長さを可変にしたいときとか、このcalcがあれば簡単にできる。

<div class="left">
  <img src="sample.jpg" width="100" />
</div>
<div class="right">
  テキストテキストテキスト・・・
</div>

<style>
.left{
  float:left;
  width:100px;
}
.right{
  float:right;
  width:calc(100% - 100px);
}
</style>

こんな風にHTMLを組めば、ブラウザの横幅を適当に広げたり縮めたりしても、左側は100pxの大きさを保ったままで、右側の文章が段落ちせずに済みます。

重宝する価値はあるんじゃないでしょーか。

less.jsにおけるcalc

さて、こっからが本題。

less.jsを使っていても、基本的なCSSの書き方は一緒です。何もless用に特別な書き方をする必要はない。

ないのですが……lessファイルの中でCSSを書く場合、実際にやってみると分かるんですが、calc()が正常に動きません。何やっても動かないってわけじゃなくて、例の、単位の違うもの同士で計算しようとすると、正常に動いてくれません。

width:calc(100% - 50px);

例えばこれだと、「100% – 50%」と解釈されてしまうみたいで、「width:50%」と同じになってしまいます。

さー困った。せっかくcalc()使いたいのに、しかたない、less.jsを使うの止めるかぁ……。

と思った人。まあ、それも一つの選択肢でしょう。

でもどうしてもless.jsを使い続けたい。calc()も使いたい。あちらを立ててこちらも立てる、そんな方法はないのか！？　教えてエロい人！

と思ってこの記事に辿り着いたそこのあなた。

オーケー、俺に任せな！(o^-‘)b　俺は偉くはないけど、エロさには定評がある。

less.jsでのcalc()の書き方

どうしてこういう書き方をするのかはともかく（正直よく分かんねえ）、less.jsを使う場合は、こんな風に書くとちゃんと解釈してくれます。

width:calc(~"100% - 50px");

先頭にチルダ（波ダッシュ？）をつけるのと、クォーテーションで囲うのがポイントですね。

less.js用の変数を使う場合は、こう。

@pixel:50px;
width:calc(~"100% - "@pixel);

普段、PHPやjavascriptを使っていると、クォーテーションと変数の間に接続記号的なものがないのが何かしっくり来ないんですが、でもこう書きます。

もし、100%の方も変数にしたいなら、こうかな。

@percent:"100%";
@pixel:50px;
width:calc(~"@{percent} - "@pixel);

クォーテーションの中で変数を使う場合、@の後ろを{}で囲います。ちなみにその場合、変数の値の方にもクォーテーションが必要になるので、注意してください。

なので、pixelの方もクォーテーションの中に入れるなら、こうなりますね。

@percent:"100%";
@pixel:"50px";
width:calc(~"@{percent} - @{pixel}");

ミックスインなんかでも、書き方によってはクォーテーションが必要になったりならなかったりするので、気をつけましょう。

//クォーテーションが不要な場合（@pixelの方だけ）
.calculation(@percent, @pixel) {
  width:calc(~"@{percent} - "@pixel);
}
.calc("100%", 50px);

//クォーテーションが必要な場合
.calculation(@percent, @pixel) {
  width:calc(~"@{percent} - @{pixel}");
}
.calc("100%", "50px");

less.jsのバージョンによっては、もしかしたらこんなごちゃごちゃやらなくても単位の違うもの同士でcalc()が使えるのかもしれませんが、もし自分の使っているバージョンで上手く動かないってときは、上記の方法を試してみてください。

なーに、礼には及ばんよ。ちょっとキレイな生足でも見せてもらえればそれでもう……ぐへへ。

ちなみに上記のやり方で上手く動かなかったって人は、僕が何か書き間違えてる可能性があるので、ご一報くだされ。