建議在流覽器中使用Less僅用於開發，或者當您需要動態編譯較少的代碼並且無法做到這一點。這是因為less.js是一個大型的JavaScript檔，並且在用戶可以看到該頁面意味著用戶的延遲之前編譯Less。另外，考慮到移動設備編譯速度會更慢。對於開發考慮如果使用觀察者和活重新載入（例如與咕嚕聲或gulp）將更適合。
引入：less引入後需要在服務器上運行才有效果，在本地的話只有Firefox和IE支持，Chrome不支持。
客戶端使用Less,一定要注意，“Less樣式檔一定要放在less腳本檔之前”。
<link rel="stylesheet/less" type="text/css" href="less.less">
<script src="less.js" type="text/javascript"></script>
https://raw.githubusercontent.com/less/less.js/v2.5.3/dist/less.min.js
1、變量（Variables）：
@color: #4d926f;
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111; //可以計算
引用：h2 { color: @color; background:@light-blue; }
注：在Less中的變量實際上就是一個“常量”，因為它們只能被定義一次。
@color: #253636;
@highlight: "color";
@color: #ff3636;
#header {color: @@highlight;} //編譯後為：#header {color: #ff3636;}
後面的@color覆蓋前面的@color
2、混入（Mixin）：
自定義一個類：
.roundedCorners(@radius:5px) { //帶默認值，不帶也可
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
引用： #header { .roundedCorners; }
#footer { .roundedCorners(10px); }
不帶參數，不傳參的類：
.wrap(){
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
引用：pre { .wrap; }
特殊參數：@argument表示所有參數
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
引用： #header { .boxShadow(2px,2px,3px,#f36); }
3、嵌套規則：
<div id="header">
<h1><a href="">W3cplus</a></h1>
<p>記述前端那些事——引領Web前沿</p>
</div>
Less Code:
#header{display: inline; float: left;
h1{font-size: 26px;font-weight: bold;
a{text-decoration: none;color: #f36;
&:hover{text-decoration: underline;color: #63f;} //偽類寫法
}
}
p{font-size: 12px;}
}
注釋：有&時解析的是同一個元素或此元素的偽類，沒有&解析是後代元素
4、Functions & Operations
支持四則運算+、-、*、/、和()
@var: 20px;
#header {
@var + 5 * 2;/* 先算5 * 2 = 10 然後在算了 @var + 10 = 30px,其實就是"@var+(5*2)"*/
height: (@var + 5 ) * 2;/*先算(@var + 5) = 25px,又算了25*2=50px，因為括弧更具有優先權*/
}
Color Fuctions：
lighten(@color, 10%); // 返回顏色亮度比@color亮10%
darken(@color, 10%); // 返回顏色亮度比@color暗10%
saturate(@color, 10%); // 返回顏色飽和度比@color多10%
desaturate(@color, 10%); // 返回顏色飽和度比@color少10%
fadein(@color, 10%); // 返回顏色透明度比@color少10%
fadeout(@color, 10%); // 返回顏色透明度比@color多10%
spin(@color, 10); // 返回顏色色調比@color高10度
spin(@color, -10); // 返回顏色色調比@color低10度
提取顏色值：
hue(@color); // 獲取@colorの色調(hue)
saturation(@color); // 獲取@colorの飽和度(saturation)
lightness(@color); // 獲取@colorの亮度(lightness)
例如： @color: #f36;
#header { }
5、命名空間
#bundle {
.button () {display: block;border: 1px solid black;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
外部引用：#header a { color: orange; #bundle > .button; } //將#bundle中的.button的樣式套用給#headerのa
6、變量範圍和注釋：
Less中採取的是就近原則，換句話說，元素先找本身有沒有這個變量存在，如果本身存在，就取本身中的變量，如果本身不存在，就尋找父元素，依此類推，直到尋找到相對應的變量。
注釋：單行：// 多行：/*注釋內容*/