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もコマンドでやると気持ちよく書けるのかな。