less导入其它less文件

本章节所讲解的内是紧跟上一个章节的内容的，如果你没有阅读上一篇章节的内容或者对本章节的内容比较模糊我建议可以去看看之前的章节内容之后在来看本章节的内容，本章节主要讲解的内容为，less 文件中导入其它 less 文件，就例如我上一章节所封装的小三角代码，其实在很多其它都是要使用到的，为了提高代码的复用性，就可以将之前编写的混合小三角代码保存到一个单独的 less 文件当中

创建 triangle.less 文件把封装的小三角混合代码当入其中

.triangle(@_, @width, @color) {
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
}

.triangle(Down, @width, @color) {
  border-width: @width;
  border-color: @color transparent transparent transparent;
}

.triangle(Top, @width, @color) {
  border-width: @width;
  border-color: transparent transparent @color transparent;
}

.triangle(Left, @width, @color) {
  border-width: @width;
  border-color: transparent @color transparent transparent;
}

.triangle(Right, @width, @color) {
  border-width: @width;
  border-color: transparent transparent transparent @color;
}

然后在需要实现小三角的 less 文件当中导入该小三角的 less 文件即可使用

@import "triangle";

div {
  .triangle(Right, 80px, green);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BNTang</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div></div>
</body>
</html>

在通过考拉客户端编译使用效果和之前的一样如下图