less是css的預(yù)處理語言，它擴(kuò)充了 CSS 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充。
我舉個(gè)簡單的例子，在less文件中，一個(gè)常用的顏色樣式，但是這個(gè)顏色樣式需要不定時(shí)更改。在css中，就必須找到選擇器再修改顏色。而less中可以把這樣的樣式變量在文件最上面，在下面直接調(diào)用這個(gè)變量，如果要修改，直接改這個(gè)變量即可。
瀏覽器能支持less，但是不建議在生產(chǎn)環(huán)境使用less，因?yàn)樯a(chǎn)環(huán)境對(duì)速度性能要求高，解析less會(huì)耗掉一部分性能，在生產(chǎn)環(huán)境可以把less解析成css使用。
雖然less文件最后還是會(huì)變成css，但是不代表less是多此一舉，使用less能大大提高開發(fā)效率。
首先介紹less解析軟件（網(wǎng)上很多用命令行解析的方法，不覺得很繁瑣嗎，我推薦使用軟件一鍵解析）：koala 下載地址：http://koala-app.com/
下面介紹less的語法.
1、公共變量和 偽類

@common-color:#fff; //定義公共變量
@hover-color:#000; //定義公共變量
@name:'content';
@content:'大明';
div{
    color:@common-color;
    &:hover{ //偽類
          color:@hover-color;
    }
    .div-son{  //子元素 
          content:@@name; //雙重調(diào)用
    }
}

解析成css后：

div{
    color:#fff;
}
div:hover{
     color:#000;
}
div .div-son{
    content:'大明';
}

less中偽類使用 & ,否則一律按子元素處理
2、繼承

.public{ //這個(gè)樣式編譯后還會(huì)在css文件中顯示
    color:#fff;
    font-size:20px;
}
div{
    .public;
    width:20px;
}
//這邊演示編譯后不需顯示的例子
.common(){
    color:#000;
}
span{
    .common;
    height:20px;
}

解析成css后

.public{ //這個(gè)樣式編譯后還會(huì)在css文件中顯示
    color:#fff;
    font-size:20px;
}
div{
    color:#fff;
    font-size:20px;
    width:20px;
}
span{//這個(gè)雖說繼承了.common類，但是在.common后面加上了  ()  就不在css中顯示了
    color:#000;
    height:20px;
}

上面的代碼其實(shí)還有很多冗余，less提供了另一種更好的方法 extend

.public {
    width:20px;
    height:10px;
}
div{
    &:extend(.public);//extend繼承的第一種寫法
    color:#fff;
}
span:extend(.public){//extend繼承的第二種寫法
    font-size:20px;
}

<h1>本文為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明出處</h1>
<h1>覺得本文對(duì)你有幫助</h1>
關(guān)注簡書前端丶米店，持續(xù)分享中。。。