less （三）一个less 文件引用另一个less文件

cvper

于 2018-04-20 19:45:55 发布

阅读量2.3w

点赞数

CC 4.0 BY-SA版权

分类专栏： less 文章标签： less 一个文件引用另一个文件 @import

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80023024

less 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个LESS文件如何导入另一个LESS文件的方法，并通过实例演示了如何设置目录结构、编写LESS代码及进行编译。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在假设我们写了两个less文件，一个文件是a.less 另一个文件是 b.less;

那么a.less文件中如何引用b.less中的文件呢？

例子：先新建如下的目录结构

文件信息：

index.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>@import</title>
        <link rel="stylesheet" href="sty.css">
    </head>
    <body>
        less 的使用;
        一个less文件引用另一个less文件
    </body>
</html>

a.less

@import "b.less";

body{
    background-color:@bg-color;
}

div{
    width:unit(@div-len,px);
    height:unit(@div-len,px);
    background-color:@div-bg;
}

b.less

@bg-color:#ffaabb;
@div-bg:#ffcc44;
@div-len:100;

在上面的文件中，我们在a.less 中使用了 @import “” 引入了b.less文件；

在编译的时候，只需要编译a.less即可，即命令：lessc a.less sty.css ；

less （三） 一个less 文件引用另一个less文件

less （三）一个less 文件引用另一个less文件