Sass/SCSS、Compassとかじってきて、とりあえず同じことだけどBootstrapとも相性が良いのでちょっと学んでおこうということで、今回はlessをやってみることにしました。ドットインストールです。
簡単な利用の仕方
公式サイトから、Less.jsを利用すると簡単。HTMLのheadタグに下記のように書き込む。
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript">
ちょっとdotインストールの方式で動かなかったので公式サイトを参考にしました。実際ちゃんと利用する際はコマンドをインストールしたほうが絶対良さそうですが、とりあえずはjavascriptで動かします。
変数（ほぼ定数）と色の演算
@color: #6c94b3;
@color2: @color + #993333;
h1 {
color: @color;
}
h2 {
color: @color2;
}
mixin
この書き方でクラスをそれぞれの要素に適用できる。引数や、初期値の登録などもできる。
.myBorder(@width:2px) {
border-top: @width solid red;
border-bottom: (@width * 2) solid red;
}
h1 {
.myBorder;
}
h2 {
.myBorder(10px);
}
便利だけど、先にCompassやったせいかCompassの方が使いやすいと感じた。lessもコマンドでやると気持ちよく書けるのかな。
