在這之前，補下一個東西同衣，就是在上篇的筆記當中有關于favicon的東西還沒有測試
我在自己的電腦的goole、opera壶运、firefox耐齐、360、ie都有測試過均可以實現
代碼很簡單<link href="imgfavicon.ico" rel="shortcut icon“ type=”images/x-icon">即可
less是一門編譯預處理語言蒋情，增加了變量埠况、Mixin、函數等特性棵癣，使css代碼更容易維護
一辕翰、環(huán)境的搭建及工具的安裝
不得不說一個小工具，叫考拉（koala）狈谊，它是可以將less文件編譯成css文件
大致的步驟是將講好的less文件夾拖入到這個軟件當中喜命，然后點擊右邊的“執(zhí)行編譯”就可以看到出現success的提示，前提是你的路徑配置正確河劝。我能說我之前都沒有用過less么壁榕，T_T，大寫的j囧
我用的前端開發(fā)工具是web'strom赎瞎，所以搭建less的環(huán)境稍微有點麻煩
1牌里、webstorm自帶less，不過要編譯的話需要nodejs環(huán)境（dwcc2017自帶less务甥，可是不需要搭建nodejs環(huán)境牡辽，所以昨天加班搭建環(huán)境我一小會兒~~~~）贪染。
1、首先去node的主頁下載對應版本的nodejs然后安裝催享，下載地址：http://nodejs.org/
2杭隙、安裝完之后打開命令提示符（win+r）,分別輸入node -v以及npm -v如果返回版本號說明你安裝成功了。
3因妙、接下來就可以安裝less了痰憎，命令提示符npm進入npm管理器，然后npm install less開始下載less攀涵，默認安裝目錄在用戶名\node_modules這里面铣耘。
到這里less安裝完畢了，接下來配置webstorm以故。
4蜗细、打開webstorm的file->settings ->External Tools，點擊左上角的“加號”標志add怒详，進入對話框
5炉媒、Name你可以隨便填，這里比較重要的是parameters昆烁，他指定lessc編譯器的地址以及輸出文件的地址吊骤，格式是："lessc的地址" $FilePath "編譯的地址（變量表示）"，如果像我這里寫的話(C:\Users\Touch-X\node_modules\less\bin\lessc $FilePath$ $FileDir$\$FileNameWithoutExtension$.css)静尼，他會默認編譯到根目錄白粉。
然后你可以用koala導入新建的less文件，輸出編譯會看到文件下.css文件
之后就是在index文件下正常引用就可以了鼠渺，<link href="css/less.css" rel="stylesheet">
注意一點是在less.less的頁面內修改鸭巴，神奇的事情就是你會在less.css頁面上看到編譯過的css文件
二、less的語法
1拦盹、變量
變量的定義 @變量名稱：屬性值
如@c：#fff鹃祖；
.title{
color:@c;
}
2、混合
.border{
border:solid 5px pink;
}
css的寫法 ：.box{
width:100px;
height:100px;
border:solid 5px pink;
}
less的寫法
.box{
width:100px;
width:100px;
border:.border;(區(qū)別)
}
3掌敬、混合帶參數
.border01(@borderwidth){
border:solid pink @borderwidth;}
.border01(20px);必須要帶值,不帶的話可以這么寫.border01(@borderwidth:20px){ ?}
4惯豆、匹配模式簡單，跟條件語句差不多的意思
.triangle(right,@w:5px,@c:red){
width:0;
height:0
border-width:@w;
border-color:@c transparent transparent transparent; //向下的三角形
?//這是一段實現三角形的代碼,之前我不理解,現在可以理解了,大家有必要去實踐下
}
.sanjiao(right,10px,red);
5奔害、運算
@test：300px;
.test{
width:(@test-20)*5;// 可以不帶單位
}
6楷兽、嵌套規(guī)則
.list{
width:600px;
padding:0;
margin:0;
ul li{
list-style-type:none;
height:30px;
line-height:30px;
a{
color:#000;
&:hover{
text-decoration:none; //&代表上層選擇器,在這里是a:hover的意思
? ? }
}
7、計算函數
如：calc（） ?
calc(300px-30px) ? //會編譯
~'calc(300px-30px)' //不會編譯
... ...
less的中文網站: http://lesscss.cn
如有錯誤,還望指出!
