【LESS系列】高级特性——模式匹配

标签：

前面我已经有一篇文章是写 LESS 的基础语法的。

那么这一次我们来看一下 LESS 的高级特性。

虽然个人觉得模式匹配的实用度其实也是一般般，但在关键时候，有它们在的话，还是能够让我们开发得更得心应手的。

其实传参设置默认值，就是一个最简单的模式匹配。

你调用 Mixins 函数，传入参数，和不传入参数，可能会出现不同的编译结果。

那么除此之外，模式匹配还有那些情况呢，让我们来看一下。

按照先前的惯例，LESS CODE 和 CSS CODE 分别是编译前跟编译后的代码。

1.用不同参数个数来匹配不同的 Mixins

/* LESS CODE */
.test(@size){
  width: @size;
}
.test(@size, @multiple){
  width: @size * @multiple;
}

.el-a{
  .test(10px);
}
.el-b{
  .test(10px, 2);
}

/* CSS CODE */
.el-a {
  width: 10px;
}
.el-b {
  width: 20px;
}

2.用常量参数来匹配不同的 Mixins

/* LESS CODE */
.test(large, @size: 10px){
  width: @size * 2;
}
.test(simple, @size: 10px){
  width: @size;
}
.test(@_， @size: 10px){
  display: block;
}

.el-a{
  .test(large);
}
.el-b{
  .test(simple);
}

/* CSS CODE */
.el-a {
  width: 20px;
  display: block;
}
.el-b {
  width: 10px;
  display: block;
}

以下是整个过程如何发生的：

第一个 .test 只有在满足 large 条件才会被匹配；

第二个 .test 只有在满足 simple 条件才会被匹配；

第三个 .test 在任何条件下，甚至是 large 和 simple 以外的条件下都会被匹配，只要满足传参规则就可以了（.test 要求传入1~2个参数）；

只要是满足匹配要求的 Mixins，都会被使用。

变量可以匹配任何值，而常量只有在传入的值与之完全相等时才可以匹配成功。

3.

【LESS系列】高级特性——模式匹配

标签：

原文地址：http://www.cnblogs.com/czf-zone/p/4395713.html