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

最新推荐文章于 2024-08-25 20:32:05 发布

原创最新推荐文章于 2024-08-25 20:32:05 发布 · 2.3w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#less #一个文件 #引用 #另一个文件 #@import

less 专栏收录该内容

8 篇文章

订阅专栏

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

现在假设我们写了两个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 ；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cvper

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用nodeJs来安装less及编译less文件为css文件的方法

10-18

本文介绍了安装Node.js和Less模块的步骤，以及通过命令行工具lessc编译Less文件的方法，并提供了一个简单的Node.js脚本示例，用于自动化编译过程。掌握这些知识点，可以让前端开发的CSS编译更加灵活和高效。

autoless:另一个.less文件监视程序，但是这次具有依赖项跟踪和咆哮通知

05-12

另一个.less文件监视程序，但是这次具有：依赖性跟踪（如果其他文件导入的文件发生更改，则会对其进行编译）。通过通知程序进行跨平台（每次编译后都会显示带有摘要的通知）。用法 $ npm install autoless -g $...

2 条评论您还未登录，请先登录后发表或查看评论

【less】less中导入其他的less文件

m0_48945495的博客

09-25

5124

less中导入其他的less文件

Less的引用

Ling201509的博客

10-05

3038

Less语法介绍 body { background-color: #eee; } 引入Less语法： <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> 说明： less.js文件必须在引入的les

less文件中导入另一个less文件

Charonmomo的博客

08-04

4366

有一个common.less文件: // 根据媒体查询,设置不同屏幕中的html字号 // 屏幕划分为15等份 // 默认显示html字号参考750px的宽度 @no: 15; html { font-size: 50px; } //320px @media screen and (min-width: 320px) { html { font-size: (320px / @no); } } 我想在 index.less 文件中引入刚才的less文件, 可以通

less引用其他less文件

weixin_34082695的博客

02-23

501

示例//radius.less #header,#footer{ -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; }//example6.less @impor...

一个less文件中引入另一个less文件

weixin_45634433的博客

07-14

1338

假设有两个 .less的文件1.less 和2.less 在1.less 中引入2.less文件 @import "2.less" ; // " ; " 是一定不可以忘记的

less/sass 文件编译成微信小程序wxss文件

03-29

在做demo小示例的过程中，我发现了一个极为让人为难的事儿：如何让 less/sass 文件转成小程序的 wxss 文件。对于基本不使用原生 css ，而习惯编写 less 的我，这个事儿让我的样式编写相当的吃力。在尝试配置 ...

精选资源

微信小程序 less文件编译成wxss文件实现办法

01-03

在做demo小示例的过程中，我发现了一个极为让人为难的事儿：**如何让 less/sass 文件转成小程序的 wxss 文件**。对于基本不使用原生css，而习惯编写less的我，这个事儿让我的样式编写相当的吃力。在尝试配置...

VueJS如何引入css或者less文件的一些坑

10-19

这里，我们使用了`require`函数，并在参数前加上了三个加载器的名称，它们之间用感叹号`!`分隔。这种写法是webpack特有的，称为“加载器链”（loader chain），它告诉webpack如何处理文件。 1. `style-loader`：将...

less基础引用

10-17

135

1.介绍： Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 2.引用：（1）首先我们在项目下面新建一个less文件，命名为less.less，里面写入最简单的语法 @base: #000000; p{ back...

less与less之间的模块引用、模块化

JEFF_xieyuzhi的博客

01-16

951

demo.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...

在一个 less 文件中引用另一个 less 文件

Amy的博客

11-22

3030

less-loader webpack provides an advanced mechanism to resolve files. The less-loader applies a Less plugin that passes all queries to the webpack resolver. Thus you can import your Less modules from ...

如何在不同文件中使用less声明的全局公共变量

qq_26880461的博客

12-10

2624

1：假设我们有一个全局的less变量文件’./style/variable.less’文件如果想要在组件样式中使用这些文件，我们需要引入这些文件，但是这样做会带来很多问题，代码冗余，不好维护。我们迫切需要一种全新的更优雅的方法——sass-resources-loader 该加载器将 less资源自动导入每个所需的 less 模块。因此，您可以在所有 less 样式中使用共享变量和mixi...

less less文件引用其他文件的变量名

water_Popcorn的博客

04-01

4720

类似公共变量，在祁同伟文件中都可以使用这个变量，也方便后期修改。一个less文件定义变量（variables.less）： @backcolor:#0085d0; @hCoor:#ffffff; @btnColor:#0085d0; 在login.less中引用： @import"../common/variables.less"; .main{ backg...

less中引入公用less文件的变量

weixin_43522687的博客

07-14

855

less中引入公用less文件的变量踩了无数坑后总结出最好用的方法： webpack添加： { loader: 'less-loader', options: { globalVars: { 'hack': `true; @import "${path.resolve(__dirname, '../src/style/mobile.less')}"` } } } ...

如何引入less?

sjssjs12的博客

02-01

5741

less官网（https://less.bootcss.com/）第一种引入方式： <link rel="stylesheet/less" type="text/css" href="less/styles.less" /> //注：引入less文件必须在前,js在后 <script src="//cdnjs.cloudflare.com/ajax/libs/les...

Less：继承（extend）

听海边涛声

08-25

1757

Less：继承（extend）

修改less文件多了一个除上述文件

最新发布

04-03

### 如何正确管理或移除多余的 `less` 文件在 Linux 或类 Unix 系统中，`less` 是一种常用的分页查看工具，通常不会直接生成多余文件。但如果提到的是 `.less` 扩展名的 CSS 预处理器文件或其他类似的临时文件，则可能涉及其他程序的行为。以下是关于如何管理和移除这些文件的方法： #### 使用 `-a` 参数避免覆盖已有文件如果某些操作可能导致文件被意外覆盖或重复创建，可以利用命令中的 `-a` 参数来附加数据而不是覆盖原有文件[^1]。 #### 列出并删除无用的 `.less` 文件可以通过以下方法查找和清理不必要的 `.less` 文件： ```bash find /path/to/directory -type f -name "*.less" ``` 上述命令会列出指定路径下的所有 `.less` 文件。确认不需要保留后，可执行批量删除操作： ```bash find /path/to/directory -type f -name "*.less" -exec rm -f {} \; ``` 此方式适用于已知目标目录的情况，并能有效减少手动干预的时间成本。 #### 比较不同版本的 `.less` 文件以解决冲突当存在多个相似名称的 `.less` 文件时，可以借助 `diff` 命令找出它们之间的差异[^2]: ```bash diff file1.less file2.less ``` 通过这种方式能够直观地判断哪些文件是冗余或者过期的数据副本，从而决定是否需要保留其中一个版本或是合并两者的内容。 #### 复制重要配置前备份原始状态为了避免因误删而导致不可逆的结果，在实施任何大规模清除行动之前建议先做好充分准备。例如使用带 `-p` 属性的复制功能保存源文件的关键元信息以便后续恢复[^3]: ```bash cp -rp original_directory backup_directory ``` 这样即使发生错误也可以迅速回滚至初始状况而无需担心丢失宝贵资料。 ---

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

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