less里面的匹配模式相当于js里面的if,但又不完全是,比如用css画一个三角
html
<div class="sanjiao"></div>

less

.sanjiao{
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 10px;
  border-color: red transparent transparent transparent;
  border-style: solid;
}
这是一个朝下的三角,那么想让它朝上怎么办呢,把border-color改成
border-color: transparent transparent red transparent;
就可以了
这个时候问题时,每次写这个三角都时候,一会向上,一会向下,都要写这么一堆吗,可以用匹配模式,
less
//匹配模式
.match(top,@w:10px,@c:red){
  border-width: @w;
  border-color: transparent transparent @c transparent;
}
.match(bottom,@w:10px,@c:red){
  border-width: @w;
  border-color: @c transparent transparent transparent;
}
.match(left,@w:10px,@c:red){
  border-width: @w;
  border-color: transparent @c transparent transparent;
}
.match(right,@w:10px,@c:red){
  border-width: @w;
  border-color: transparent transparent transparent @c;
}
//@_表示,不管上下左右都带上这个固定的样式
.match(@_,@w:10px,@c:red){
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-style: solid;
}
.sanjiao{
  .match(bottom)
}
=>
.sanjiao {
  border-width: 10px;
  border-color: #ff0000 transparent transparent transparent;
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-style: solid;
}
如果说上面的有点复杂,我们来个稍微简单点的,比如定位
html
<div class="posDiv"></div>
less
.pos(a){
  position: absolute;
}
.pos(r){
  position: relative;
}
.pos(f){
  position: fixed;
}
.posDiv{
  width: 100px;
  height: 100px;
  .pos(a);
}
=>
.posDiv {
  width: 100px;
  height: 100px;
  position: absolute;
}

less匹配模式的更多相关文章

  1. SQL中常用模糊查询的四种匹配模式&&正则表达式

    执行数据库查询时,有完整查询和模糊查询之分.一般模糊语句如下:SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式:1.%:表示任意0个或多个字 ...

  2. Javascript中正则表达式的全局匹配模式

    先看一道JavaScript题目,据说是国内某知名互联网企业的JavaScript笔试题,如果对正则的全局匹配模式不了解的话可能会对下面的输出结果感到疑惑. var str = "123#a ...

  3. SQL模糊查询条件的四种匹配模式

    执行数据库查询时,有完整查询和模糊查询之分. 一般模糊语句格式如下: SELECT 字段 FROM 表 WHERE 某字段 LIKE 条件 其中关于条件,SQL提供了四种匹配模式: 1.% :表示任意 ...

  4. coreseek/sphinx中的匹配模式

    所谓匹配模式就是用户怎样依据keyword在索引库中查找相关的记录. SPH_MATCH_ALL, 匹配全部查询分词(默认模式); 如"手机配件".不匹配 "我有一部手机 ...

  5. SpringCloud系列九:SpringCloudConfig 基础配置(SpringCloudConfig 的基本概念、配置 SpringCloudConfig 服务端、抓取配置文件信息、客户端使用 SpringCloudConfig 进行配置、单仓库目录匹配、应用仓库自动选择、仓库匹配模式)

    1.概念:SpringCloudConfig 基础配置 2.具体内容 通过名词就可以发现,SpringCloudConfig 核心作用一定就在于进行配置文件的管理上.也就是说为了更好的进行所有微服务的 ...

  6. Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。

    文章简介:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null. querySelector()方法接受一个CSS查询并返回匹配模式的第 ...

  7. Python: re.compile最短匹配模式,只取双引号内的值\“

    用正则表达式匹配某个文本模式 1.只取双引号内的值 2.长短匹配模式对比 贪婪模式:     模式r'\"(.*)\" '的意图是匹配被双引号包含的文本,但是这个表达式中*是贪婪的 ...

  8. RegExp正则匹配模式汇总

    正则表达式提供另一种强大的文本搜索和处理方式,对于正则表达式,不同语言有着不同的实现,JavaScript采用的Perl5的语法.对于极少数匹配模式是简单的全字符文本的情况,我们往往会采用indexO ...

  9. Sphinx 匹配模式

    所谓匹配模式就是用户如何根据关键字在索引库中查找相关的记录. SPH_MATCH_ALL, 匹配所有查询分词(默认模式); 如“手机配件”,不匹配 “我有一部手机”,但可以匹配 “手机坏了,需要找配件 ...

  10. Drools学习笔记2—Conditions / LHS 匹配模式&条件元素

    Rule的LHS由条件元素(Conditional Elements—CE)和匹配模式(Patterns)组成 Patterns被用来指示出fact的字段约束 每个约束必须为true才能让RHS的ac ...

随机推荐

  1. python:序列化与反序列化(json、pickle、shelve)

    本节内容 前言 json模块 pickle模块 shelve模块 总结 一.前言 1. 现实需求 每种编程语言都有各自的数据类型,其中面向对象的编程语言还允许开发者自定义数据类型(如:自定义类),Py ...

  2. C#实现动态发布IIS站点帮助类

    准备工作: 1.引用 System.DirectoryServices 系统程序集 2.引用 Microsoft.Web.Administration 程序集,类库位置在 C:\Windows\Sys ...

  3. UiPath工具当中写入代码

    在UIPath的工具中选择下面的控件 点击[Edit Code]之后出现写代码的地方,入力VB.net代码 点击[Edit Arguments]之后是这个方法的传入和传出的值. 下面自己做的一个小例子 ...

  4. [转帖]微软宣布即将开始大规模推送Windows 10 V1903重大版本更新

    微软宣布即将开始大规模推送Windows 10 V1903重大版本更新 https://www.cnbeta.com/articles/tech/894303.htm 微软要批量更新 1903了 bu ...

  5. redis事务、并发及应用场景

    目录 事务概念 事务命令 乐观锁 悲观锁 并发控制及过期时间 队列 队列防丢失 阻塞队列 时间区间控制 持久化 RDB AOF 命令追加 文件写入.同步 RDB.AOF优缺点 RDB优缺 AOF优缺 ...

  6. C++ algorithm算法库

    C++ algorithm算法库 Xun 标准模板库(STL)中定义了很多的常用算法,这些算法主要定义在<algorithm>中.编程时,只需要在文件中加入#include<algo ...

  7. C++中如何记录程序运行时间

    一.clock()计时函数clock()是C/C++中的计时函数,而与其相关的数据类型是clock_t.在MSDN中,查得对clock函数定义如下:clock_t clock(void) ;简单而言, ...

  8. py kafka

    # https://github.com/confluentinc/confluent-kafka-python/blob/master/examples/consumer.py #生产者 impor ...

  9. BZOJ3879 SvT(后缀树+虚树)

    对反串建SAM得到后缀树,两后缀的lcp就是其在后缀树上lca的len值,于是每次询问对后缀树建出虚树并统计答案即可. #include<iostream> #include<cst ...

  10. 利用Filter和HttpServletRequestWrapper实现请求体中token校验

    先说一下项目的背景,系统传参为json格式,token为其中一个必传参数,此时如果在过滤器中直接读取request,则后续controller中通过RequestBody注解封装请求参数是会报stre ...