导入

它用于导入LESS或CSS文件的内容。

例子

下面的例子演示了在LESS文件中使用导入:

<html>
<head>
   <title>Less Importing</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
   <h1>Example using Importing</h1>
   <p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
   <p class="myclass1">It allows reusing CSS code and writing LESS code with same semantics.</p>
   <p class="myclass2">LESS supports creating cleaner, cross-browser friendly CSS faster and easier.</p>
</body>
</html>

接下来，创建文件 myfile.less 。

.myclass{
    color: #FF8000;
}

.myclass1{
    color: #5882FA;
}

接下来，创建文件 style.less 。

@import "//www.jsrun.cn/less/myfile.less";
.myclass2
{
color: #FF0000;
}

将路径从 style.less 的 myfile.less “> //www.jsrun.cn/less/myfile.less

您可以使用以下命令将 style.less 文件编译为 style.css :

lessc style.less style.css

接下来执行上面的命令，它将用下面的代码自动创建 style.css 文件:

.myclass {
  color: #FF8000;
}
.myclass1 {
  color: #5882FA;
}
.myclass2 {
  color: #FF0000;
}

输出

让我们执行以下步骤，看看上面的代码如何工作:

将上述html代码保存在 importing.html 文件中。
在浏览器中打开此HTML文件，将显示如下输出。

Example using Importing
LESS enables customizable, manageable and reusable style sheet for web site.
It allows reusing CSS code and writing LESS code with same semantics.
LESS supports creating cleaner, cross-browser friendly CSS faster and easier.

导入

导入

例子

输出

选择支付方式：