6_less中的匹配模式

如果利用div创建一个箭头:

它的HTML代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet/less" href="css/09.less">
    <script src="js/less.js"></script>
</head>
<body>
<div></div>
</body>
</html>

它的less代码:

.triangle(@width,@color) {
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
}

div {
  .triangle(80px, blue);
}

如果要创建不同朝向的这个箭头,
此时可以利用less的匹配:

.triangle(Down,@width,@color) {
  width: 0;
  height: 0;
  border-width: @width;
  border-style: solid solid solid solid;
  border-color: @color transparent transparent transparent;
}

.triangle(Top,@width,@color) {
  width: 0;
  height: 0;
  border-width: @width;
  border-style: solid solid solid solid;
  border-color: transparent transparent @color transparent;
}

.triangle(Left,@width,@color) {
  width: 0;
  height: 0;
  border-width: @width;
  border-style: solid solid solid solid;
  border-color: transparent @color transparent transparent;
}

.triangle(Right,@width,@color) {
  width: 0;
  height: 0;
  border-width: @width;
  border-style: solid solid solid solid;
  border-color: transparent transparent transparent @color;
}

div {
// 此时利用第一个形参,指定调用上面第四个 .triangle
  .triangle(Right, 80px, blue);
}

运行:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Xdm9RDo-1607182203842)(img/7.png)]

但是,此时可以发现,有好多重复的代码:

  width: 0;
  height: 0;
  border-style: solid solid solid solid;

所以,此时可以用通用匹配模式:

// 表示是要调用了这个 triangle ,就会执行里面的代码
.triangle(@_,@width,@color) {
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
}

那么,less代码最终可以简化为:

// @_ 表示匹配所有,只要调用了triangle,就会调用有 @_ 的样式
// @_ 表示通用的匹配模式
// 什么是通用匹配模式:
// 就是无论哪一个混合被匹配了,都会执行通用匹配模式中的代码
.triangle(@_,@width,@color) {
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
}

.triangle(Down,@width,@color) {
  border-width: @width;
  border-color: @color transparent transparent transparent;
}

.triangle(Top,@width,@color) {
  border-width: @width;
  border-color: transparent transparent @color transparent;
}

.triangle(Left,@width,@color) {
  border-width: @width;
  border-color: transparent @color transparent transparent;
}

.triangle(Right,@width,@color) {
  border-width: @width;
  border-color: transparent transparent transparent @color;
}

div {
  .triangle(Left, 80px, blue);
}

让代码短了一丢丢

全部评论

推荐最新楼层

今天 09:31

清华大学机械设计/制造

考研弃考的比较多？

大家好，今天给大家分享一下考研弃考的比较多吗。每年的考研弃考率基本上在10~30%之间（文末有往年深圳大学的弃考率），弃考比较多的两个时间段有：第一个阶段：暑假过后弃考的人比较多，因为暑假有些人没有坚持复习或者复习效果比较差，然后考虑放弃考研，参加秋招找工作。第二个阶段：考研初试的第一天过后弃考的人也比较多，因为有些人考完第一场考试或者第二场考试就绷不住了，感觉自己考砸了，然后就放弃了第二天的考试，你会发现你在考试的这两天，越到后面整个考场的人越来越少。考研建议：1、既然复习到这个时候了，你们一定要坚持到最后，考完了你才有希望，坚持到最后你至少战胜了30%的人。例子：当时我隔壁室友只参加了初试...

点赞评论收藏

12-08 18:02

门头沟学院 Java

实习避坑！！！

线上实习，有的还要付费，美其名曰实习其实就是培训机构。这类机构就抓住我们没有实习的同学迫切想找一个实习的心态，骗取钱财 笔试形式不是答题链接而是给了一个文件或问题清单。这种就是白嫖你劳动力或者思路的，我做过好几个问题清单，都是没有后续的，还有这种加微信发文件的，做完根本不会再联系你了

你找工作经历过哪些骗局？

点赞评论收藏

10-22 15:25

门头沟学院 C++

民办本科 26届秋招拿到的最满意的offer

先介绍一下自身情况：学校是民办本科，专业是软件工程，方向是C++，地区是成都。因为本人一直觉得学校差的情况下，只有实习经历能弥补，所以本人大三上就去外面实习到现在，有了两段实习经历。一段是小厂，一段是中大厂。之后就离职去全力参加秋招，大大小小面了很多家，但是对待遇这块儿都不怎么满意，觉得工资太少了（可能是跟成都it行业普遍工资低有关）。后来偶然投到了一家与自身实习经历有些契合的北京的一家企业，刚好hr看到我的经历，对我也挺感兴趣。就一天直接速通了hr面，技术面，董事长面。最后董事长对我的交谈，以及各方面都挺喜欢，所以想把我作为未来正式员工去培养。直接给我开了一个无法拒绝待遇：实习350一天➕包住宿➕包去北京的机票➕周末双休➕朝九晚六以及如果能力没啥问题，转正2w以内没啥问题。且明年会在成都开分公司，到时候可以让我常驻成都

种花网友小松：求求你别发了，我几乎都快嫉妒得疯了，倒在床上蒙住被子就开始抱着枕头尖叫流泪，嘴里一边喊着卧槽卧槽，一边又忍着，我边发边哭，打字的手都是抖的，后来我的手抖得越来越厉害，从心头涌起的思想、情怀和梦想，这份歆羡和悔恨交织在一起，我的笑还挂在脸上，可是眼泪一下子就掉下来了。求你了别发了，我生活再难再穷我都不会觉得难过，只有你们发这种东西的时候，我的心里像被刀割一样的痛，打着字泪水就忍不住的往下流。

我的求职进度条

点赞评论收藏