Less是一門CSS預處理語言，它擴展了CSS語言籽前，增加了變量裙顽、混合付燥、函數等特性，使CSS更易維護和擴展愈犹。
Less的官方網站有
英文：http://www.lesscss.org/
中文：http://www.lesscss.net/

Less只有讓編譯才能被瀏覽器解析机蔗；Less的編譯軟件有好多：
1：Koala，國人開發(fā)的全平臺的Less編譯工具 網站：http：//koala-app.com/
2：WinLess甘萧，Windows下的Less編譯軟件 網站：http：winless.org
3：CodeKit萝嘁，MAC平臺下的Less編譯軟件 網站：http：incident57.com/codekit/index.html
其中Koala，個人感覺很好用扬卷，國人開發(fā)牙言，都是中文。

一 嵌套：
原CSS代碼

.conten ul{
    list-style:none;
}
.conten li{
  height:25px;
  line-height:25px;
  paddling-left:15px;
  background:url('arr.jpg');
}
.conten li a{   
text-decoration:none;
color:#333
}

Less代碼

.conten{
  ul{
    list-style:none;
  }
 li{
    height:25px;
    line-height:25px;
    paddling-left:15px;
    background:url('arr.jpg');
    a{
        text-decoration:none;
        color:#333;
      }
  }
}

二 Less的注釋
less的注釋有兩種一個是 //注釋怪得，一個是/* * /注釋咱枉，其中//的注釋不會編譯到CSS當中，只有/**/才會被編譯到CSS當中徒恋。
三 變量
定義變量的話蚕断，它有許多定義變量的東西，
1 普通變量
普通變量定義方式@
Less寫法：

@blue:#5b83ad;
header{
color:@blue;
}

編譯結果

header{
color:#5b83ad;
}

注意變量只能聲明一次入挣，他們都是“常量”亿乳；
2 作為選擇器和屬性名
使用時將變量以@{變量名}的方式使用，意思說是他可以當做CSS的選擇器径筏，Less代碼：

@mySelector:width;
@{mySelector}{
@{mySelector}:960px;
height:500px;
}

編譯之后CSS代碼

.width{
width:960px;
height:500px;
}

3 作為URL
就先比如百度的LOGO的葛假，百度的LOGO是https://www.baidu.com/img/bdlogo.png，使用時滋恬，使用“”把變量的值擴起來聊训，它同樣是以@{變量名}的方式使用，Less的代碼

@imgurl:"https://www.baidu.com/img/"
header{
background:url("@{imgurl}bdlogo.png");
}

4 延遲加載
什么是延遲加載恢氯，延遲加載就是聲明的變量是延遲加載的带斑，在使用前不一定要預先聲明鼓寺，就像JS中var變量提升一樣，你的變量在之前聲明還是之后聲明是沒有任何變化的勋磕。
二 混合
1: 基本的混合
混合就是一種將一系列屬性從一個規(guī)則集引入（混合）到另一個規(guī)則集的方式侄刽，簡單來說，就是在CSS中定義一個類朋凉，這個類能干什么呢州丹，這個類可以寫一些可重用的屬性，Less代碼：

.borderred{
border-top:dotted 1px black;
border-bottom:solid 2px black;
}
header{
font-size:20px;
.borderred;
}
footer{
font-size:30px;
.borderred;
}

CSS代碼是

header{
font-size:20px;
border-top:dotted 1px black;
border-bottom:solid 2px black;
}
footer{
font-size:30px;
border-top:dotted 1px black;
border-bottom:solid 2px black;
}

2 ： 不帶輸出的混合

什么是不帶輸出的混合杂彭，其實和上面差不多墓毒，上面代碼在編譯CSS的時候，會把你定義的類也編譯出來亲怠，然后我們只用在你定義類的后面寫上一個（）就可以啦所计，就像是這樣 .borderred（）;

3：帶選擇器的混合
什么是帶選擇器的混合，就是這個類有一個偽類的屬性团秽，而這個類里面的自己主胧，也就是JS里面的this，這個this寫成&符號习勤。Less代碼：

.my-hover-mixin(){
  &:hover{
    border:1px solid red;
  }
}
button{
.my-hover-mixin;
}

編譯之后的代碼是

buttom:hover{
  border:1px solid red;
}

4 ：帶參數的混合
什么是的帶參數的混合踪栋，簡單的來說就是JS的function封裝，可以進行傳參數图毕。Less代碼

.border(@color){
border:2px solid @color;
}
h1{
  &:hover{
    .border(green);
  }
}
h2{
  &:hover{
    .border(#000);
  }
}

編譯之后CSS的代碼

h1:hover{
  border:2px solid green;
}
h2:hover{
  border:2px solid #000;
}

5：帶參數并且有默認值
這又是什么夷都，這其實就是說如果這個混合沒傳參數，是有默認值的予颤，如果傳了參數就是傳的參數囤官，怎么寫呢。Less代碼：

.border(@color:#000){
  border:2px solid @color;
}
h1{
  &:hover{
    .border();
  }
}
h2{
  &:hover{
    .border(#666);
  }
}

編譯之后的CSS代碼

h1:hover{
  border:2px solid #000;
}
h2:hover{
  border:2px solid #666;
}

6：帶多個參數的混合
什么是帶多個參數的混合蛤虐，一個組合可以帶多個參數党饮，參數之間可以用逗號或者分號分割，但是推薦使用分號分割驳庭，因為逗號符號有2個意思刑顺，它可以解釋為mixins參數分隔符或者CSS列表分隔符。官網是這樣說的：
1：兩個參數嚷掠，并且每個參數都是逗號分割的列表：.name(1,2,3;something,ele)
2：三個參數捏检，并且每個參數都包含一個數字：.name（1,2,3）
3：使用偽造的分號創(chuàng)建mixin，調用的時候參數包含一個逗號分割的CSS列表：.name（1不皆，2，3熊楼；）霹娄，
4：逗號分割默認值：.name（@param1：red能犯，blue）
Less代碼：

.mixin(@color;@padding:xxx;@margin:2){
color:@color;
padding:@padding;
margin:@margin @margin @margin @margin;
}
.divaize{
.mixin(1,2,3;something,ele;12)
}
.divaize{
.mixin(1,2,3)
}

編譯的CSS代碼：

.divaize{
color:1,2,3;
padding:something,ele;
margin:12 12 12 12;
}
.divaize{
color:1;
padding:2;
margin:3 3 3 3;
}

簡單點來說，就是如果傳參的括號里面全部都是以“犬耻，”分割踩晶，那么會依次傳給各個參數值，
如果傳參的括號里面既有“枕磁，”又有“渡蜻；”那么，會把“计济；”前面的看作一個整體茸苇，傳給一個值。
7：命名參數
命名參數就是引用mixin時可以通過參數名稱而不是參數的位置來為mixin提供參數值沦寂。任何參數都已通過它的名稱來引用学密，這樣就不必按照任意特定的順序來使用參數Less代碼：

.mixin(@color:black;@margin:10px;@padding:20px){
color:@color;
margin:@margin；
padding:@padding;
}
.class1{
.mixin(@margin:20px;@color:#33acfe);
}
.class2{
.mixin(#efca44;@padding:40px);
}

編譯之后的CSS代碼

.class1{
color:#33acfe;
margin:20px;
padding:20px;
}
.class2{
color:#efca44;
margin:10px;
padding:40px;
}

8：@arguments變量
@arguments變量代表是所有的可變參數传藏，注意@arguments腻暮；代表所有可變參數是，參數的先后順序就是你的（）內的參數的先后順序毯侦，值的位置和個數也是一一對應的哭靖，只有一個值，把值賦值給第一個侈离，兩個值款青，賦值給第一個和第二個，三個值霍狰，分別賦值給第三個......以此類推抡草，但是需要主要的是假如我想給第一個和第三個賦值，你不能寫（值1蔗坯，康震，值3），必須把原來的默認值寫上去宾濒。
9：匹配模式
匹配模式：傳值的時候定義一個字符腿短，在使用的時候使用這個字符， 就調用這條規(guī)則Less代碼：

.border(all;@w:5px){
border-radius:@w;
}
.border(t_l;@w:5px){
border-top-left-radius:@w;
}
.border(b_l;@w:5px){
border-bottom-left-radius:@w;
}
//調用Less
.border{
.border（all绘梦，50%）橘忱；
}
.border{
.border（t_l，50%）卸奉；
}

編譯CSS代碼

.border{
border-radius:50%;
}
.border{
border-top-left-radius:50%;
}

就是說我想用什么樣的格式就定義的時候前面加上一個字符钝诚，調用的時候也加上這個字符。
10：得到混合的中變量的返回值
你可以將混合中的值進行運算榄棵，得到你想要的一個值凝颇。Less代碼

@.average(@x,@y){
@average:((@x + @y)/2)
}
div{
.average(16px,50px);
padding:@average;
}

編譯之后CSS代碼

div{
padding: 33px;
}

三：運算
運算的說明：任何數值潘拱，顏色和變量都可以進行運算。
Less會為你自動推斷數值的單位拧略，所以你不必每一個值都加上單位芦岂，注意：運算符與值之間必須以空格分開，涉及優(yōu)先級時以（）進行優(yōu)先級運算Less運算：

.wp{
width:450px + 450;
}

編譯結果：

.wp{
width:900px;
}

顏色值運算時垫蛆，Less在運算時禽最，先將顏色值轉換為rgb模式，然后在轉換為16進制的顏色值并且返回袱饭。Less代碼：

.content{
background:#000000 + 21;
}

編譯之后的CSS：

.content{
background:#212121;
}

注意：既然是轉換為rgb的取值范圍是0-255川无，所以我們計算的時候不能超過這個區(qū)間，超過后默認使用最大值255宁赤。
四：命名空間
將一些需要的混合組合在一起舀透，可以通過嵌套多層id或者class實現！Less代碼：

#bgcolor(){
background:#fff;
  .a{
        color:#888;
    &:hover{
        color:#ff6600
    }
    .b{
      background:#ff0000;
    }
  }
}

.bgcolor1{
background:#fdfee0;
#bgcolor > .a;
}
.bgcolor2{
#bgcolor > .a>.b;
}

CSS代碼

.bgcolor{
  background:#fdfee0;
  color:#888;
}
.bgcoloe:hover{
  color:#ff6600;
}
.bgcolor{
 background:#ff0000;
}

其中里面的>就和CSS中的子選擇器一樣决左，可以省略或者換成空格愕够，效果是一樣的。