JZTXT

less-匹配模式

发布时间 2023-09-15 13:12:26作者: Yancy00
//匹配模式 有点像函数重载
.arrow {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 10px;
  border-color: transparent transparent limegreen transparent;
  border-style: dashed dashed solid dashed;
}

.triangle(top,@b-width:5px,@b-color:red) {
  border-width: @b-width;
  border-color: transparent transparent @b-color transparent;
  border-style: solid;
}

.triangle(right,@b-width:5px,@b-color:red) {
  border-width: @b-width;
  border-color: transparent transparent transparent @b-color;
  border-style: solid;
}

.triangle(bottom,@b-width:5px,@b-color:red) {
  border-width: @b-width;
  border-color: @b-color transparent transparent transparent;
  border-style: solid;
}

.triangle(left,@b-width:5px,@b-color:red) {
  border-width: @b-width;
  border-color: transparent @b-color transparent transparent;
  border-style: solid;
}

//共用的样式放在这里. 第一个参数为固定格式: @_, 后面参数与上面保持一致
.triangle(@_,@b-width:5px,@b-color:red) {
  width: 0;
  height: 0;
  overflow: hidden;
}

.box {  // 使用
  .triangle(top, 50px, green);
  .triangle(right, 50px, green);
  .triangle(bottom, 50px, green);
  .triangle(left, 50px, green);
}

image