less最新官網
http://less.bootcss.com/
Less 是一種動態的樣式語言。Less擴展了CSS的動態行爲，比如說，設置變量（Variables）、混合書寫模式（mixins）、操作（operations）和功能（functions）等等，最棒的是，Less使用了現有的CSS語法，也就是說，你可以直接把你現成的樣式文件“style.css”直接改成“style.less”，他也能正常工作。如：
<link rel="stylesheet/less" href="less/style.less" />
Less現在可以在客戶端（如：IE+,Webkit,Firefox）和服務器（如node.js）上運行。前面也說過Less是CSS的一種擴展，他不但向後兼容，而且在現有的CSS語法基礎上增加許多額外的功能。
LESS的基礎語法基本上分爲以下幾個方面：變量、混合(Mixins)、嵌套規則、運算、函數、作用域等。
1、註釋
可以用css的/**/註釋，編譯成css文件時，該註釋會被保留。
也可以用雙斜槓//註釋，編譯成css文件時，該註釋不會被保留。
2、變量
必須用@開始，推薦採用駝峯式命名。如：@變量名：值
/*======== 定義變量===========*/
@color: #4d926f;
/*======== 應用到元素中 ========*/
#header { color: @color;} h2 { color: @color;}
注：在Less中的變量實際上就是一個“常量”，因爲它們只能被定義一次。
@arguments變量 和 方法
例：.border_arg(@w:30px, @c: red, @x: solid) {
border: @arguments;
}
例：
.screen-w(@a; @b) {
width: @a;
height: @b;
}
3、混合（mixin）
混合其實就是一種嵌套，它充許你將一個類嵌入到另一個類中，而被嵌入的這個類也稱爲是一個變量。換句話說，你可以用一個類定義CSS，然後把整個爲當作一個變量來使用，嵌入到另一人類中當作他的屬性；另外混合也像一個帶有參數的functions，如下在的例子：
/*========= 定義一個類 ===========*/
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/*＝＝＝＝＝＝＝＝＝＝ 定義的類應用到另個一個類中 ＝＝＝＝＝＝＝＝＝＝＝*/
＃header {
.roundedCorners(); //調用時，不帶參數混合，不用寫括號
}
#footer {
.roundedCorners(10px);
}
混合有：不帶參數混合、帶參數混合、帶默認參數混合。
4、匹配模式
相當於js當中的if(但不完全是)，它要滿足條件後才能匹配。
.pos(a) {
position: absolute;
}
.pos(r) {
position: relative;
}
.pos(f) {
position: fixed;
}
.pos(@_) {
width:200px;
}
使用時：
.myDiv {
.pos(r);
}
@_ 是固定寫法，意思是以上不管哪個匹配到或者沒有匹配到，都要加上裏面的屬性。
5、運算
less中，任何數字、顏色、變量都可以參與運算，運算應該被包裹在括號中。 常見運算如：+ - * /例：
@w: 300px;
.box {
width:(@w + 20) * 10; //運算中，只有一個帶單位就行
color: #ccc - 20; //實際開發中不常用
}
6、嵌套規則
例：.list {
width: 300px;
li {
height: 30px;
}
a {
float: left;
&: hover {
color: red;
}
}
}
& 代表它的上一級選擇器。
實際開發中，儘量少用多重嵌套，減少DOM查詢，可提高頁面加載性能
7、避免編譯
需求：有時需要輸出一些不正確的css語法或less不認識的語法。辦法：可以在字符串前加一個波浪號+引號 ~‘ ’
例：
width: ~"calc(100% - 10)";