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

最新推荐文章于 2024-04-28 21:56:39 发布
最新推荐文章于 2024-04-28 21:56:39 发布
阅读量2.3w 收藏 3
点赞数
分类专栏： less 文章标签： less 一个文件 引用 另一个文件 @import
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvper/article/details/80023024
版权

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



cvper
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
less引用其他less文件
weixin_34082695的博客
02-23 441
示例//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中导入其他的less文件
m0_48945495的博客
09-25 4460
less中导入其他的less文件
Less使用教程和步骤_less的使用
最新发布
2401_84435700的博客
04-28 1057
less是css的预处理语言，可以使用变量、函数、表达式等动态语言功能。其他常用的css预处理语言 sass stylus。
一个less文件中引入另一个less文件
weixin_45634433的博客
07-14 1092
假设有两个 .less的文件1.less 和2.less 在1.less 中引入2.less文件 @import "2.less" ; // " ; " 是一定不可以忘记的
Less的引用
Ling201509的博客
10-05 2783
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 4066
有一个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基础引用
风的专栏
08-27 7868
1.介绍： Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 2.引用： （1）首先我们在项目下面新建一个less文件，命名为less.less，里面写入最简单的语法 @base: #000000; p{ background-co...
详解linux less命令查看大文件
09-15
在Linux操作系统中，`less`命令是一个强大的文本查看器，尤其适用于处理大文件和长输出。它允许用户分页查看文件内容，并提供了丰富的交互式功能。下面我们将深入探讨`less`命令的使用方法和相关知识。 首先，`less...
linux cat more less显示文件的区别
09-16
liunx下几个常见的用于显示文件命令的区别
VueJS如何引入css或者less文件的一些坑
10-19
本篇文章主要介绍了VueJS如何引入css或者less文件的一些坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
项目中的less文件和图片资源
11-10
在"项目中的less文件和图片资源"中，提到的 "src 下的 assets 文件夹" 是一个常见的前端项目结构。这个 assets 文件夹通常用于存放项目的所有静态资源，包括图片、字体、音频、视频等。在 Less 文件中引用这些资源时...
IntellJ idea使用FileWatch实时编译less文件的方法
08-28
其中，File Watch插件是一个非常有用的工具，可以实时监听文件变化并对其进行编译。在本文中，我们将介绍如何使用File Watch插件在IntelliJ IDEA中实时编译Less文件。 什么是Less？ Less是一种动态样式语言...
在一个 less 文件中引用另一个 less 文件
Amy的博客
11-22 2877
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 ...
react项目中引入less
weixin_46369590的博客
12-15 684
如果是自己练习的项目用不到.git文件，直接把**.git文件删除即可**。如果是协同开发的项目先把代码commit之后再执行下一步。2.在改文件中搜索 sassModuleRegex 后，在其下方添加如下代码。解包之后出现config，说明解包成功，显示weppack的配置文件。1.找到webpack.config.js，3.添加后的代码结构为下图。,配置完成之后记得重启项目。
react引入less
weixin_42261408的博客
07-25 301
creat-react-app项目中引入less 1.安装less-loader 运行 `npm install less-loader --save` 安装 2.弹出webpack配置 运行 `npm run eject`即可弹出 3.修改webpack配置 第一步： const lessRegex = /\.less$/; const lessModul...
如何引入less?
sjssjs12的博客
02-01 5605
less官网（https://less.bootcss.com/） 第一种引入方式： &lt;link rel="stylesheet/less" type="text/css" href="less/styles.less" /&gt; //注：引入less文件必须在前,js在后 &lt;script src="//cdnjs.cloudflare.com/ajax/libs/les...
less的基本使用
Litt_White的博客
03-30 4732
定义同一变量名称（名字）两次或多次后，less只会选择最后定义的！@bg-img : "路径1";@bg-img : "路径2";@bg-img : "路径3";header {} // 结果为：background : url("路径3");
html怎样引入less文件,less引用其他less文件
weixin_29294975的博客
06-17 621
示例//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@import"radius.less";@the-border:1px;...
跟我一起了解less（2）：变量和引用
weixin_30485379的博客
05-10 300
详细介绍：http://lesscss.cn/usage/ 语法：定义和引用都使用@的前缀 切入正题直接例举用法（截图是解析后的结果） //用法一：一般变量赋值@w:50px;@h:50; @p:height;.box1 { width:@w - 10; //运算符和变量间一定要留空格 @p:@h; } //用法二：选择器、字符串、属性的连接需...
至少使用三种less语法写一个音乐播放器文件
05-25
1. 使用变量 ```less @player-bg-color: #f0f0f0; @player-fg-color: #333; @player-font-size: 16px; .music-player { background-color: @player-bg-color; color: @player-fg-color; font-size: @player-font-size; .player-controls { // 控制按钮样式 } .playlist { // 歌曲列表样式 } } ``` 2. 使用嵌套规则 ```less .music-player { background-color: #f0f0f0; color: #333; font-size: 16px; .player-controls { button { // 控制按钮样式 } } .playlist { li { // 歌曲列表项样式 } } } ``` 3. 使用 mixin ```less .player-controls { .button-style() { background-color: #f0f0f0; color: #333; border: none; padding: 10px; font-size: 16px; cursor: pointer; } .play-button { .button-style(); &:hover { background-color: #333; color: #fff; } } .pause-button { .button-style(); &:hover { background-color: #333; color: #fff; } } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值