Less是一門CSS預(yù)處理語言，它擴展了CSS語言，增加了變量、混合、函數(shù)等特性，使CSS更易維護和擴展。
Less的官方網(wǎng)站有
英文：http://www.lesscss.org/
中文：http://www.lesscss.net/

Less只有讓編譯才能被瀏覽器解析；Less的編譯軟件有好多：
1：Koala，國人開發(fā)的全平臺的Less編譯工具 網(wǎng)站：http：//koala-app.com/
2：WinLess，Windows下的Less編譯軟件 網(wǎng)站：http：winless.org
3：CodeKit，MAC平臺下的Less編譯軟件 網(wǎng)站：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當(dāng)中，只有/**/才會被編譯到CSS當(dāng)中。
三 變量
定義變量的話，它有許多定義變量的東西，
1 普通變量
普通變量定義方式@
Less寫法：

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

編譯結(jié)果

header{
color:#5b83ad;
}

注意變量只能聲明一次，他們都是“常量”；
2 作為選擇器和屬性名
使用時將變量以@{變量名}的方式使用，意思說是他可以當(dāng)做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 延遲加載
什么是延遲加載，延遲加載就是聲明的變量是延遲加載的，在使用前不一定要預(yù)先聲明，就像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 ：帶參數(shù)的混合
什么是的帶參數(shù)的混合，簡單的來說就是JS的function封裝，可以進行傳參數(shù)。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：帶參數(shù)并且有默認值
這又是什么，這其實就是說如果這個混合沒傳參數(shù)，是有默認值的，如果傳了參數(shù)就是傳的參數(shù)，怎么寫呢。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：帶多個參數(shù)的混合
什么是帶多個參數(shù)的混合，一個組合可以帶多個參數(shù)，參數(shù)之間可以用逗號或者分號分割，但是推薦使用分號分割，因為逗號符號有2個意思，它可以解釋為mixins參數(shù)分隔符或者CSS列表分隔符。官網(wǎng)是這樣說的：
1：兩個參數(shù)，并且每個參數(shù)都是逗號分割的列表：.name(1,2,3;something,ele)
2：三個參數(shù)，并且每個參數(shù)都包含一個數(shù)字：.name（1,2,3）
3：使用偽造的分號創(chuàng)建mixin，調(diào)用的時候參數(shù)包含一個逗號分割的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;
}

簡單點來說，就是如果傳參的括號里面全部都是以“，”分割，那么會依次傳給各個參數(shù)值，
如果傳參的括號里面既有“，”又有“；”那么，會把“；”前面的看作一個整體，傳給一個值。
7：命名參數(shù)
命名參數(shù)就是引用mixin時可以通過參數(shù)名稱而不是參數(shù)的位置來為mixin提供參數(shù)值。任何參數(shù)都已通過它的名稱來引用，這樣就不必按照任意特定的順序來使用參數(shù)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變量代表是所有的可變參數(shù)，注意@arguments；代表所有可變參數(shù)是，參數(shù)的先后順序就是你的（）內(nèi)的參數(shù)的先后順序，值的位置和個數(shù)也是一一對應(yīng)的，只有一個值，把值賦值給第一個，兩個值，賦值給第一個和第二個，三個值，分別賦值給第三個......以此類推，但是需要主要的是假如我想給第一個和第三個賦值，你不能寫（值1，，值3），必須把原來的默認值寫上去。
9：匹配模式
匹配模式：傳值的時候定義一個字符，在使用的時候使用這個字符， 就調(diào)用這條規(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;
}
//調(diào)用Less
.border{
.border（all，50%）；
}
.border{
.border（t_l，50%）；
}

編譯CSS代碼

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

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

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

編譯之后CSS代碼

div{
padding: 33px;
}

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

.wp{
width:450px + 450;
}

編譯結(jié)果：

.wp{
width:900px;
}

顏色值運算時，Less在運算時，先將顏色值轉(zhuǎn)換為rgb模式，然后在轉(zhuǎn)換為16進制的顏色值并且返回。Less代碼：

.content{
background:#000000 + 21;
}

編譯之后的CSS：

.content{
background:#212121;
}

注意：既然是轉(zhuǎn)換為rgb的取值范圍是0-255，所以我們計算的時候不能超過這個區(qū)間，超過后默認使用最大值255。
四：命名空間
將一些需要的混合組合在一起，可以通過嵌套多層id或者class實現(xiàn)！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中的子選擇器一樣，可以省略或者換成空格，效果是一樣的。