less的配置和使用

Posted 2020-10-22

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/
简单使用：
@border:‘1px solid #000‘;
.box{
border:@border;
}
混合模式：
.class1{
border:1px solid #b7b7b7;
}
.clearFix{
*zoom:1;
&:after{
content: ‘‘;
display: block;
clear: both;
}
}
.class2{
.class1;
.clearFix;
}
& 代表父级元素

//模式匹配

.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:100px;
}

.box1{
.border(top,5px);
}

.box2{
.border(right);
}

.box3{
.border(bottom);
}
.box4{
.border(left);
}
less 的注释：
//这种注释方法不会被编译到css文件里面去（通常用于生产环节）
/*
这种注释会被解析到css文件里面去
*/
less 避免编译：
~"..." font:(12/@rem)~‘/‘(20/@rem) ‘微软雅黑‘;