1. 什么是less?
- Less 是一門(mén) CSS 預(yù)處理語(yǔ)言泵额，它擴(kuò)展了 CSS 語(yǔ)言涮母，增加了變量谆趾、Mixin、函數(shù)等特性叛本，使 CSS 更易維護(hù)和擴(kuò)展沪蓬。Less 可以運(yùn)行在 Node 或?yàn)g覽器端。
- less的同類(lèi)型工具還有Sass,stylus等
- less 它必須要編譯成css文件来候，才能被瀏覽器解析跷叉。
2.怎么使用less?
- 如果不想安裝任何軟件和插件，練習(xí)less語(yǔ)法的使用营搅，可以直接到
js.jirengu.com中直接寫(xiě)代碼云挟。 - 如下圖，在css中選擇less模板
U95%(NHYI`WT~N}$I7QU5CW.png
less 語(yǔ)法
- 注釋 转质，
/**/注釋的內(nèi)容后它會(huì)編譯到對(duì)應(yīng)的css文件植锉，// 注釋的內(nèi)容會(huì)保留在less文件中不會(huì)注釋到對(duì)應(yīng)的css文件中
/這段文字注釋會(huì)編譯到css文件/
//這段文件注釋不會(huì)編譯到css文件中 - 變量聲明
@變量名:值,有利于在多個(gè)重復(fù)代碼一次修改，只需要修改變量值即可
@color:red;
body{background:@color}
div{background:@color}
![)P%%TIDSPU%H{9HG]U_RODP.png](http://upload-images.jianshu.io/upload_images/3361706-4f83994b44c59bb1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 混合
- 無(wú)參數(shù)峭拘，可以把寫(xiě)好
.border直接寫(xiě)入div的樣式中，結(jié)果如下圖
.border{
border:1px solid #fff;
}
div{
width:100px;
height:100px;
.border
}
![MC$A1C0DBGK]8`4(G0KT5ZC.png](http://upload-images.jianshu.io/upload_images/3361706-4717ddfe27d87851.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2.有參數(shù)， 形式如.xxx(@變量)
.border-01(@width){
border: solid red @width;
}
.test{
.one;
.border-01(20px)
}
1.png
3.參數(shù)可以傳遞默認(rèn)值 .xxx(@變量:value)
.border-02(@border_width:10px){
border: solid red @border_width
}
div{
.one;
.border-02()//此時(shí)div的border默認(rèn)寬度為10px;
//也可以對(duì)默認(rèn)值進(jìn)行修改如 .border-02(20px);
}
- 匹配模式鸡挠，相當(dāng)于javascript 中的if;
//css中我們一般這樣畫(huà)一個(gè)三角形
.sanjiao{
width: 0;height: 0;
overflow: hidden;
border-width: 10px;
border-color: red transparent transparent transparent;
border-style: solid dashed dashed dashed
}
less中我們可以使用匹配模式,如.triangle(top,@w:5px,@c:#ccc)辉饱， 讓三角形有更好的復(fù)用性
.triangle(top,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: solid dashed dashed dashed
}
//@_ 表示繼承上面.triangle的樣式
.triangle(@_,@w:5px,@c:#ccc){
width: 0;height: 0;
overflow: hidden;
}
.sanjiao{
.triangle(top)
} - 運(yùn)算，可以的使用
+-*/等運(yùn)算符對(duì)寬度拣展、高度彭沼、顏色進(jìn)行運(yùn)算（一般不建議使用）等
@test_01:300px;
.box_02{
width: @test_01+205;//寬度為300+205=400px
color:#ccc-10;//減法顏色會(huì)變淡，#c2c2c2
} - 嵌套备埃，功能強(qiáng)大姓惑，可以讓我們像寫(xiě)html的結(jié)構(gòu)一樣寫(xiě)css;
div{
ul{
li{ }
}
}
![F%HTLYTS1~H]POCDP`9KXJK.png](http://upload-images.jianshu.io/upload_images/3361706-cc044452c4f98dc8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- arguments，類(lèi)似于JS中arguments類(lèi)數(shù)組
.border_arg(@w:30px,@c:red,@xx:solid){
boder:@arguments;//代表（）中的三個(gè)參數(shù)
}
.test_arguments{
.border_arg();
} - 避免編譯
~'xxxx ',主要是有些屬性less編譯成css會(huì)讓瀏覽器無(wú)法解析按脚，這里以CSS3中的calc()計(jì)算屬性
//編譯前
.test_04{
width: 300px;
height:calc(300px-30px);//讓瀏覽器計(jì)算為300-30=270px
}
//編譯后
.test_04 {
width: 300px;
height: calc(270px);//失去了計(jì)算的意義于毙，瀏覽器不起作用
}
// 避免編譯使用
.test_03{
width: 300px;
height:~'calc(300px-30px)';
}
//編譯后仍就保持原樣
.test_03 {
width: 300px;
height: calc(300px-30px);
} - !important 使用增加優(yōu)先級(jí)
//編譯前
.border-radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius: @radius;
}
.test_important{
.border-radius()!important;
}
//編譯后
.test_important {
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;
}
3.安裝less的編譯軟件
- 最簡(jiǎn)單的是國(guó)產(chǎn)軟件koala，使用很簡(jiǎn)單,很強(qiáng)大辅搬，可以編譯多種CSS的預(yù)處理語(yǔ)言唯沮，如less,sass,compass等，適合新手使用堪遂，安裝很簡(jiǎn)單介蛉，可以報(bào)錯(cuò)提示，可以實(shí)施編譯溶褪，相當(dāng)好用币旧！
網(wǎng)址：koala - nodejs安裝包，可以結(jié)合gulp使用猿妈，通過(guò)
npm install gulp-less的包吹菱，再去配置gulpfile.js中的任務(wù)，實(shí)現(xiàn)工程化自動(dòng)編譯less語(yǔ)言于游，比較復(fù)雜毁葱，不適合新手。 - 第三種就是讓瀏覽器解析贰剥，不用安裝軟件倾剿，直接在html的文件
<head></head>中引入less.js,而且less.js必須放在style.less的后面
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script> - 建議新手練習(xí)less,sass等語(yǔ)法時(shí)可以直接使用koala軟件，或是到j(luò)s.jirengu.com直接練習(xí)蚌成，node的安裝less包有了一定命令行基礎(chǔ)和前端gulp等工具的經(jīng)驗(yàn)使用前痘，但是node執(zhí)行不能很簡(jiǎn)單實(shí)時(shí)編譯，每次修改后都要重新執(zhí)行任務(wù)（備注：當(dāng)然有些大神肯定會(huì)配置担忧，反正我是不會(huì)）
- 參考資料：less文檔
