less：匹配模式

Posted 2020-11-10 keep

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