给CSS加点料——Less（四）

Hello小伙伴们，今天还是要接着分享less呢！其实less也没剩很多啦，今天就要结束了呢～今天要主要从Extend、Loops和Merge来为大家介绍～

♚

Extend

.extend其实是一个Less伪类，它会合并它所在的选择器和它所匹配的引用。举个?：

.row1{
  width: 4*@length;
  height: 2*@length;
  background: orange;
  &:extend(.row2);
}
.row2{
  color: pink;
}

转化之后是什么样子的呢？

.row1 {
  width: 400px;
  height: 200px;
  background: orange;
}
.row2,
.row1 {
  color: pink;
}

我们可以见到，row1也拿到了row2的属性，这就是.extend的功劳啦。让我们来解读一下这是什么意思，我们首先通过extend拿到row1选择器，然后在row2所出现的地方应用扩展选择器即row1，row1就能够得到row2的样式啦。扩展选择器不仅可以加给一个选择器，也可以放入一个规则。我们来看看它的语法吧：（这里有点懒，从官网搬了过来

）

• 选择器之后的扩展：pre:hover:extend(div pre)。
• 在选择器和扩展之间有空格是允许的：pre:hover :extend(div pre).
• 也允许有多个扩展: pre:hover:extend(div pre):extend(.bucket tr) - 注意这与 pre:hover:extend(div pre, .bucket tr)一样。
• 这是不允许的: pre:hover:extend(div pre).nth-child(odd)。因为扩展必须在最后。

♚

Loops

我们知道在JS、Java、python等语言中，都有循环，但是小伙伴们要问了在less中用循环做什么呢。其实也是有用的，比如有很多个类，row1、row2、row3，只有后面的参数不一样，有了循环，我们是不是可以节约代码了？最常见的例子就是bootstrap的栅格系统！它的用法有点类似于do while：

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

转换成为css则为：

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

大家看懂了吗？在本例子中.generate-columns接收一个参数，这个参数就是这个循环的boundary，@i则是从1开始，进行循环，然后when后面则是一个条件判断，如果i达到了boundary，则停止循环，{...}中则是循环要执行的内容了，像本例子则是边界值为4，当i<4的时候，都会去执行输出一个

.column-@{i} {
    width: (@i * 100% / @n);
  }

这样子是不是 清晰了很多呢？

♚

Merge

今天最后要说的是Merge，merge能够从多个属性中将值集合到一个单一的属性之下的逗号或空格分割属性列表中。最适用于background和transform。

.mixin() {
  box-shadow+: outset 0 0 10px #ccc;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px eee;
}

转化成CSS：

.myclass {
  box-shadow: outset 0 0 10px #ccc, 0 0 20px eee;
}

可见两个相同的属性名称，在这里不是被覆盖了，而是加到了后面。

♚

Import

最后想唠叨的就是导入，因为我们常常会使用一些样式库，这该怎么办呢？这就请出import了，就比如：

@import (reference) "rabbit.less";

不仅是less文件，css也可以下面导入指令已经被实现了：

• reference：使用Less文件但不输出
• inline：在输出中包含源文件但不加工它
• less：将文件作为Less文件对象，无论是什么文件扩展名
• css：将文件作为CSS文件对象，无论是什么文件扩展名
• once：只包含文件一次（默认行为）
• multiple：包含文件多次

好啦，今天的分享就到这里啦，喜欢兔妞的文章就请在看+关注吧～～也可以公众号留言，与兔妞互动哦！话说下次更点啥！