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) '微软雅黑';

转载于:https://www.cnblogs.com/xiaozhishang/p/8350568.html