码迷,mamicode.com
首页 > 其他好文 > 详细

less:匹配模式

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

标签:relative   osi   编译   otto   style   一个   模式   Fix   idt   

相当于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:匹配模式

标签:relative   osi   编译   otto   style   一个   模式   Fix   idt   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!