首页 > 其他 > 详细

less:匹配模式

时间:2018-06-05 00:07:18      阅读:270      评论:0      收藏:0      [点我收藏+]

相当于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;
}
 

 

less:匹配模式

原文:https://www.cnblogs.com/qjuly/p/9136458.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!