在这之前，补下一个东西，就是在上篇的笔记当中有关于favicon的东西还没有测试
我在自己的电脑的goole、opera、firefox、360、ie都有测试过均可以实现
代码很简单<link href="imgfavicon.ico" rel="shortcut icon“ type=”images/x-icon">即可
less是一门编译预处理语言，增加了变量、Mixin、函数等特性，使css代码更容易维护
一、环境的搭建及工具的安装
不得不说一个小工具，叫考拉（koala），它是可以将less文件编译成css文件
大致的步骤是将讲好的less文件夹拖入到这个软件当中，然后点击右边的“执行编译”就可以看到出现success的提示，前提是你的路径配置正确。我能说我之前都没有用过less么，T_T，大写的j囧
我用的前端开发工具是web'strom，所以搭建less的环境稍微有点麻烦
1、webstorm自带less，不过要编译的话需要nodejs环境（dwcc2017自带less，可是不需要搭建nodejs环境，所以昨天加班搭建环境我一小会儿~~~~）。
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;(区别)
}
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、嵌套规则
.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
如有错误,还望指出!
