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やツールなどでコンパイルが推奨されている。
実行結果
demo1
demo2
