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. dozer工具类

    jar:commons-beanutils-1.9.3.jar.commons-lang-2.6.jar.dozer-5.3.2.jar.jcl-over-slf4j-1.7.25.jar.slf4j ...

  2. Springboot 参数中传List

    使用REST API时,经常会有get/delete方法需要传一个list的情况,如果使用post难免有点破坏规则,实际上参数传list是可以做到的 方法一: 后端代码如下: @DeleteMappi ...

  3. 【VS开发】Wix 安装教程

    original link :  http://www.cnblogs.com/stoneniqiu/p/3355086.html 因为项目需要,最近在研究Wix打包部署,园子里也有一些关于wix ...

  4. redis 设置后台守护运行的两种方式

    第一种:进入src目录,执行 nohup ./redis-server & 第二种:redis.conf==> daemonize=yes,启动redis-server后面加redis. ...

  5. Rhino脚本引擎技术介绍

    引用:http://p.primeton.com/articles/54c1e255be20aa4735000001 http://blog.csdn.net/u013292493/article/d ...

  6. vue报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    在.vue文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one roo ...

  7. java中this的使用

    java中的this随处可见,用法也多,现在整理有几点:this1.当全局变量跟局部变量重名时,表示使用全局变量(此时this指代本类对象)例有一类class A{    String name;   ...

  8. 腾讯云+阿里云 搭建hadoop + hbase

    目录 服务器配置 hadoop hbase JAVA测试 历时两天,踩了无数坑最后搭建成功... 准备 两台服务器都安装jdk1.8(最好装在相同路径). hadoop 下载 hbase 下载 这里使 ...

  9. Redis 常用命令学四:集合类型命令

    1.增加和删除命令 127.0.0.1:6379> SADD st a (integer) 1 127.0.0.1:6379> SADD st r f g (integer) 3 127. ...

  10. golang之map的使用声明

    1.map的基本介绍 map是key-value数据结构,又称为字段或者关联数组.类似其它编程语言的集合,在编程中是经常使用到的 2.map的声明 1)基本语法 var map 变量名 map[key ...