less是css的預(yù)處理語(yǔ)言眯漩，它擴(kuò)充了 CSS 語(yǔ)言芹扭，增加了諸如變量、混合（mixin）赦抖、函數(shù)等功能舱卡，讓 CSS 更易維護(hù)、方便制作主題队萤、擴(kuò)充轮锥。
我舉個(gè)簡(jiǎn)單的例子，在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的語(yǔ)法.
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)注簡(jiǎn)書前端丶米店，持續(xù)分享中冷守。刀崖。。
