less：匹配模式
2024-08-30 00:54:49
相当于JS中的if(不完全是)，满足条件后才能匹配
.margin(top, @width: 5px) {
margin: @width 0 0 0;
}
.margin(right, @width: 5px) {
margin: 0 @width 0 0;
}
.margin(bottom, @width: 5px) {
margin: 0 0 @width 0;
}
.margin(left, @width: 5px) {
margin: 0 0 0 @width;
}
.box {
width: 200px;
height: 200px;
.margin(left);// 括号里面写left就会执行上面left的代码
border: 1px solid red;
}
编译成css
.box {
width: 200px;
height: 200px;
margin: 0 0 0 5px;
border: 1px solid red
}
在来一个例子：
.pos(r) {
position: relative
}
.pos(a) {
position: absolute;
}
.pos(f) {
position: fixed;
}
.box {
width: 200px;
height: 200px;
border: 1px solid red;
.pos(r);
}
编译成css
.box {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
@_ 代表不管选择的是谁都带上这个样式
.margin(top, @width: 5px) {
margin: @width 0 0 0;
}
.margin(right, @width: 5px) {
margin: 0 @width 0 0;
}
.margin(bottom, @width: 5px) {
margin: 0 0 @width 0;
}
.margin(left, @width: 5px) {
margin: 0 0 0 @width;
}
.margin(@_,@width: 5px) {
width: 200px;
height: 200px;
border: 1px solid red;
}
.box {
.margin(left, 10px);
}
编译成css
.box {
margin: 0 0 0 10px;
width: 200px;
height: 200px;
border: 1px solid red;
}
最新文章
- spring注解源码分析--how does autowired works？
- vs2015企业版太大了
- openstack 整合
- hdoj 2199 Can you solve this equation?【浮点型数据二分】
- 启动Tomcat的几种方式
- Qt实战之开发CSDN下载助手 （3）（结束篇）
- 获取 Windows 任务栏 Rect
- 【Python】Shell MD5使用的那些事
- VS2010 / MFC + OpenCV 2.4.9打开图片
- jdk各个版本的新特性（jdk1.7，1.8，1.9）
- 【BZOJ5496】[十二省联考2019]字符串问题（后缀树）
- 以方法调用的原理解释Ruby中“puts ‘Hello‘”
- thinkphp添加数据 add()方法
- Socket 类
- python-memcached包使用方法
- 无前趋的顶点优先的拓扑排序方法(JAVA)(转载http://128kj.iteye.com/blog/1706968)
- Spring3.0.3使用之异常解决
- python packages prebuild for windows
- wordpress注册后重定向到自定义页面
- 《Head First 设计模式》读后总结：基础，原则，模式