less的配置和使用
2024-09-05 18:04:00
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) '微软雅黑';
最新文章
- 【资源】108个大数据文档PDF开放下载-整理后打包下载
- Study plan for automation test framework
- 十款让 Web 前端开发人员更轻松的实用工具
- 两道关于JS的小考题（闭包与中间件）
- jQuery autoComplete 样式
- [iOS UI进阶 - 3.0] 触摸事件的基本处理
- 使用WeCloud消息推送接口发送消息NodeJs版
- 用scikit-learn研究局部线性嵌入(LLE)
- （6综合实验）从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
- [Swift]LeetCode525. 连续数组 | Contiguous Array
- Ubuntu 下重启网络的方法
- Java的基础知识二
- 51 Nod 1256 乘法逆元(数论：拓展欧几里得）
- C语言第十一讲,预处理命令.
- 039 hive中关于数据库与表等的基本操作
- PHP的生成器、yield和协程
- Unreal Engine 4 笔记 2
- C#远程桌面连接工具
- vue 笔记一
- JVM内存模型 小小结