CSS lessの変数を使ってみる

CSSのlessの変数の記述の書き方

@mycolor: #F60;

.demo1 {
    color: @mycolor;
}

.demo2 {
    color: @mycolor;
}

上記のファイルを外部参照する。

<link rel="stylesheet/less" type="text/css" href="/trial/css/less/sample.less">

反映されるHTML

<div class="demo1">demo1</div>
<div class="demo2">demo2</div>

.lessファイルをコンパイルするJSの読み込み。

<script src="/trial/css/less/less.min.js" ></script>

このJSは速度が落ちるため本来であればNode.jsのCUIやツールなどでコンパイルが推奨されている。

実行結果