lessをちょっとかじってみた

lessをちょっとかじってみたSass/SCSSCompassとかじってきて、とりあえず同じことだけど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もコマンドでやると気持ちよく書けるのかな。

関連リンク

Pocket
LINEで送る

You may also like...