【LESS系列】高级特性

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

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

说起高级特性，首先也必须要一提的是模式匹配。

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

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

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

OK了，还是上主菜吧，下面列出了几项 LESS 的高级特性。

按照先前的惯例，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 CODE */
.test(@size) when (@size >= 10){
  width: @size;
  color: #f00;
}
.test(@size) when (@size < 10){
  width: @size;
  color: #000;
}

.el-a{
  .test(20px);
}
.el-b{
  .test(5px);
}

/* CSS CODE */
.el-a {
  width: 20px;
  color: #f00;
}
.el-b {
  width: 5px;
  color: #000;
}

有了条件表达式，总算可以跟 SASS 的 @if 比拼一下了，虽然实际用起来感觉还是不如 @if，但总比被完爆要强不少了。

 

4.条件表达式中使用类型检测函数

/* LESS CODE */
.test(@param) when (iscolor(@param)){
  color: @param;
}
.test(@param) when (isnumber(@param)){
  width: @param;
}

.el-a{
  .test(#f00);
}
.el-b{
  .test(5px);
}

/* CSS CODE */
.el-a {
  color: #ff0000;
}
.el-b {
  width: 5px;
}

当然，上面的例子仅仅是列出了两个类型检测函数，LESS 提供了很多类型检测函数，如：iscolor、isnumber、isstring、iskeyword、isurl等等，具体的话，我会在下一篇 LESS 函数说明中提及。

 

5.条件表达式中使用 and、or、not

/* LESS CODE */
.test(@size) when (@size > 10) and (@size < 20){
  width: @size;
  color: #000;
}
.test(@size) when (@size < 10), (@size > 20){
  width: @size;
  color: #ff0;
}
.test(@size) when not (@size = 20){
  text-align: center;
}


.el-a{
  .test(15px);
}
.el-b{
  .test(5px);
}
.el-c{
  .test(10px);
}

/* CSS CODE */
.el-a {
  width: 15px;
  color: #000;
  text-align: center;
}
.el-b {
  width: 5px;
  color: #ff0;
  text-align: center;
}
.el-c {
  text-align: center;
}

细心的同学会发现，LESS 中的逻辑与，是用英文逗号“,”来实现的，而不是直接用 or。

 

6.条件表达式中参数和参数进行比较

/* LESS CODE */
.test(@width, @height) when (@width >= @height){
  width: @width;
  height: @height;
  background-color: #000;
}
.test(@width, @height) when (@width < @height){
  width: @width;
  height: @height;
  background-color: #f00;
}

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

/* CSS CODE */
.el-a {
  width: 10px;
  height: 20px;
  background-color: #f00;
}
.el-b {
  width: 20px;
  height: 10px;
  background-color: #000;
}

 

7.高级参数用法

/* LESS CODE */

/* 不接受任何参数 */
.test(){
  ...
}
/* 接受任意多个参数 */
.test(...){
...
}
/* 接受1个参数 */
.test(@size: 1px){
  ...
}
/* 接受0~1个参数 */
.test(@size){
  ...
}
/* 同样是接受任意多个参数 */
.test(@size: 1px, ...){
  ...
}
/* 接受1~N个参数 */
.test(@size, ...){
  ...
}

主要是说明“...”的用法，另外还有先前（在基本语法一文中）提到的 @arguments 变量，如果已经淡忘，那可以去回顾下了。

 

8.作用域

/* LESS CODE */

.test(@bgColor, @size){
  .set-bg-color(){
    background: @bgColor;
  }
  .set-size(){
    width: @size;
    height: @size;
  }

  .set-bg-color();
  .set-size();
}

.el-a{
  .test(#fff, 20px);
}

/* CSS CODE */
.el-a {
  background: #ffffff;
  width: 20px;
  height: 20px;
}

可以看到，在 .test 中，我还定义了两个 Mixins （就是 .set-bg-color 和 .set-size），但是这两个 Mixins 的作用域仅仅是在 .test 之中，如果在外部调用是会编译报错的。

而 .set-bg-color 和 .set-size 作为 .test 的内部 Mixins，它们本身虽然没参数，却又可以直接使用 .test 的参数。

是不是和 JS 很像？如果你对 JS 的作用域有所了解，那么这些应该不难理解。

 

9.字符串插值

/* LESS CODE */
.test(@domain){
  background-image: url("@{domain}/img/test.png");
}

.el-a{
  .test('http://asset.img.com');
}

/* CSS CODE */
.el-a {
  background-image: url("http://asset.img.com/img/test.png");
}

这一个特性在统一配置静态资源所在域中会有很好的发挥

 

10.避免编译

/* LESS CODE */
.test(){
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

.el-a{
  .test();
}

/* CSS CODE */
.el-a {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

对于像滤镜这种特别的 CSS （特别之处在于这样的 CSS 本身就是一种函数调用，而 LESS 又没有提供这样的函数），LESS 通过 ~"内容" 这样格式来直接输出内容，避免对内容部分进行编译。

 

11.在 LESS 中使用 Javascript

/* LESS CODE */
.el-a{
  font-size: 12px;
  color: #f00;
  &:before{
    @arr: 'hello', 'world';
    content: `@{arr}.join(' ').toUpperCase()`;
  }
}

/* CSS CODE */
.el-a {
  font-size: 12px;
  color: #f00;
}
.el-a:before {
  content: "HELLO WORLD";
}

上面的例子中，可以捕抓到几个点：

如何用 LESS 变量来定义数组，@arr: 'hello', 'world'；

如何在 LESS 中使用 JS（用“``”来包住要执行的JS语句），and 当中的 JS 如何获取 LESS 中定义的变量（用“@{变量名}”的格式），content: `@{arr}.join(' ').toUpperCase()`；

由于一般情况下，我们都是用 LESS 编译出 CSS 后，直接引用 CSS 文件的。所以在 LESS 中一般都不会使用和 DOM 相关的 JS 代码；

虽然说，能在 LESS 中使用 JS 是一件很让人兴奋的事，但实际上...除了极少时候需要做字符串处理外，真的想不到有什么时候需要用到这一特性...