1. 什么是less?
- Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 可以運行在 Node 或瀏覽器端。
- less的同類型工具還有Sass,stylus等
- less 它必須要編譯成css文件，才能被瀏覽器解析。
2.怎么使用less?
- 如果不想安裝任何軟件和插件，練習less語法的使用，可以直接到
js.jirengu.com中直接寫代碼。 - 如下圖，在css中選擇less模板
U95%(NHYI`WT~N}$I7QU5CW.png
less 語法
- 注釋 ，
/**/注釋的內容后它會編譯到對應的css文件，// 注釋的內容會保留在less文件中不會注釋到對應的css文件中
/這段文字注釋會編譯到css文件/
//這段文件注釋不會編譯到css文件中 - 變量聲明
@變量名:值,有利于在多個重復代碼一次修改，只需要修改變量值即可
@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)
- 混合
- 無參數，可以把寫好
.border直接寫入div的樣式中，結果如下圖
.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.有參數， 形式如.xxx(@變量)
.border-01(@width){
border: solid red @width;
}
.test{
.one;
.border-01(20px)
}
1.png
3.參數可以傳遞默認值 .xxx(@變量:value)
.border-02(@border_width:10px){
border: solid red @border_width
}
div{
.one;
.border-02()//此時div的border默認寬度為10px;
//也可以對默認值進行修改如 .border-02(20px);
}
- 匹配模式，相當于javascript 中的if;
//css中我們一般這樣畫一個三角形
.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)， 讓三角形有更好的復用性
.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)
} - 運算，可以的使用
+-*/等運算符對寬度、高度、顏色進行運算（一般不建議使用）等
@test_01:300px;
.box_02{
width: @test_01+205;//寬度為300+205=400px
color:#ccc-10;//減法顏色會變淡，#c2c2c2
} - 嵌套，功能強大，可以讓我們像寫html的結構一樣寫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，類似于JS中arguments類數組
.border_arg(@w:30px,@c:red,@xx:solid){
boder:@arguments;//代表（）中的三個參數
}
.test_arguments{
.border_arg();
} - 避免編譯
~'xxxx ',主要是有些屬性less編譯成css會讓瀏覽器無法解析，這里以CSS3中的calc()計算屬性
//編譯前
.test_04{
width: 300px;
height:calc(300px-30px);//讓瀏覽器計算為300-30=270px
}
//編譯后
.test_04 {
width: 300px;
height: calc(270px);//失去了計算的意義，瀏覽器不起作用
}
// 避免編譯使用
.test_03{
width: 300px;
height:~'calc(300px-30px)';
}
//編譯后仍就保持原樣
.test_03 {
width: 300px;
height: calc(300px-30px);
} - !important 使用增加優先級
//編譯前
.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的編譯軟件
- 最簡單的是國產軟件koala，使用很簡單,很強大，可以編譯多種CSS的預處理語言，如less,sass,compass等，適合新手使用，安裝很簡單，可以報錯提示，可以實施編譯，相當好用！
網址：koala - nodejs安裝包，可以結合gulp使用，通過
npm install gulp-less的包，再去配置gulpfile.js中的任務，實現工程化自動編譯less語言，比較復雜，不適合新手。 - 第三種就是讓瀏覽器解析，不用安裝軟件，直接在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> - 建議新手練習less,sass等語法時可以直接使用koala軟件，或是到js.jirengu.com直接練習，node的安裝less包有了一定命令行基礎和前端gulp等工具的經驗使用，但是node執行不能很簡單實時編譯，每次修改后都要重新執行任務（備注：當然有些大神肯定會配置，反正我是不會）
- 參考資料：less文檔
