less的配置和使用
less 的配置：
1.浏览器端的使用
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
需要注意的是 stylesheet/less
这种方法不推荐使用、影响性能
2.第三方工具 koala
http://koala-app.com/index-zh.html
使用less的时候打开koala
3.npm 安装 下载node
$ npm install -g less
HBuilder 工具>选项>预编辑器>less编辑
路径： C:\Users\目前用户\AppData\Roaming\npm\lessc.cmd
命令参数： %FileName% %FileBaseName%.css
less 的用法：
api : http://lesscss.cn/usage/
嵌套 &符号代表父元素 &:hover
变量 @width: 100px;
混合模式：
//1,最简单的混合
/*.classa{
border:1px solid #b7b7b7;
}
.clearFix{
*zoom:1;
&:after{
content: '';
display: block;
clear: both;
}
}
.classb{
.classa;
.clearFix;
}*/
//带参数混合
/*
.border(@color){
border:1px solid @color;
}
.box1{
.border(#b7b7b7);
}
.box2{
.border(#ff0000);
}
.box3{
.border(#b7b7b7);
}
//多个参数的混合
.border(@width,@style,@color){
border:@width @style @color;
}
.box1{
.border(1px,solid,#b7b7b7);
}
.box2{
.border(1px,solid,#ff0000);
}
.box3{
.border(2px,solid,#b7b7b7);
}
.box4{
.border(1px,dotted,#b7b7b7);
}*
//带默认值的参数混合
.border(@width:1px,@style:solid){
border:@width @style #033333;
}
.box1{
.border(1px,dotted);
}
.box2{
.border();
}
.box3{
.border(2px);
}
.box4{
.border();
}
//arguments变量 , 代表了所有的参数（在不在乎参数顺序的时候可以使用）；
.border(@style:solid,@width:1px){
border:@arguments #033333;
}
.box1{
.border(1px,dotted);
}
.box2{
.border();
}
.box3{
.border(2px);
}
.box4{
.border();
}*
//模式匹配
.border(top,@width:1px){
border-top:@width solid #033333;
}
.border(right,@width:1px){
border-right:@width solid #033333;
}
.border(bottom,@width:1px){
border-bottom:@width solid #033333;
}
.border(left,@width:1px){
border-left:@width solid #033333;
}
.border(@_,@width:1px){
width:round(5.5)*1px;
}
.box1{
.border(top,5px);
}
.box2{
.border(right);
}
.box3{
.border(bottom);
}
.box4{
.border(left);
}
//Math函数
/*
round(5.5) 四舍五入
ceil(2.4); 向上取整// returns `3`;
floor(2.6); 向下取整// returns `2`;
*/
less 的注释：
//这种注释方法不会被编译到css文件里面去（通常用于生产环节）
/*
这种注释会被解析到css文件里面去
*/
less 避免编译：
~"..." font:(12/@rem)~'/'(20/@rem) '微软雅黑';
