当前位置： 首页 > news >正文

Less 安装教程

news 2026/2/9 9:49:58

文章目录

  • 前言
  • LESS的系统要求
  • 安装LESS
  • 例子
  • 输出
  • Less编译css工具
  • 后言

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：Sass和Less
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

LESS的系统要求

  • 操作系统:跨平台

  • 浏览器支持: IE(Internet Explorer 8+)，Firefox，Google Chrome，Safari。

安装LESS

步骤(1):我们需要NodeJ运行LESS示例。 要下载NodeJ，请打开链接node ，您 会看到如下所示的屏幕:
在这里插入图片描述
下载zip文件的最新功能版本。

步骤(2): 接下来，运行安装程序以在系统上安装 Node.js 。

步骤(3): 接下来，通过NPM(节点程序包管理器)在服务器上安装LESS。 在命令提示符下运行以下命令。

npm install -g less

步骤(4): 接下来，在成功安装LESS后，您将在命令提示符下看到以下行:

`-- less@2.6.1+-- errno@0.1.4| `-- prr@0.0.0+-- graceful-fs@4.1.3+-- image-size@0.4.0+-- mime@1.3.4+-- mkdirp@0.5.1| `-- minimist@0.0.8+-- promise@7.1.1| `-- asap@2.0.3+-- request@2.69.0| +-- aws-sign2@0.6.0| +-- aws4@1.3.2| | `-- lru-cache@4.0.0| |   +-- pseudomap@1.0.2| |   `-- yallist@2.0.0| +-- bl@1.0.3| | `-- readable-stream@2.0.6| |   +-- core-util-is@1.0.2| |   +-- inherits@2.0.1| |   +-- isarray@1.0.0| |   +-- process-nextick-args@1.0.6| |   +-- string_decoder@0.10.31| |   `-- util-deprecate@1.0.2| +-- caseless@0.11.0| +-- combined-stream@1.0.5| | `-- delayed-stream@1.0.0| +-- extend@3.0.0| +-- forever-agent@0.6.1| +-- form-data@1.0.0-rc4| | `-- async@1.5.2| +-- har-validator@2.0.6| | +-- chalk@1.1.1| | | +-- ansi-styles@2.2.0| | | | `-- color-convert@1.0.0| | | +-- escape-string-regexp@1.0.5| | | +-- has-ansi@2.0.0| | | | `-- ansi-regex@2.0.0| | | +-- strip-ansi@3.0.1| | | `-- supports-color@2.0.0| | +-- commander@2.9.0| | | `-- graceful-readlink@1.0.1| | +-- is-my-json-valid@2.13.1| | | +-- generate-function@2.0.0| | | +-- generate-object-property@1.2.0| | | | `-- is-property@1.0.2| | | +-- jsonpointer@2.0.0| | | `-- xtend@4.0.1| | `-- pinkie-promise@2.0.0| |   `-- pinkie@2.0.4| +-- hawk@3.1.3| | +-- boom@2.10.1| | +-- cryptiles@2.0.5| | +-- hoek@2.16.3| | `-- sntp@1.0.9| +-- http-signature@1.1.1| | +-- assert-plus@0.2.0| | +-- jsprim@1.2.2| | | +-- extsprintf@1.0.2| | | +-- json-schema@0.2.2| | | `-- verror@1.3.6| | `-- sshpk@1.7.4| |   +-- asn1@0.2.3| |   +-- dashdash@1.13.0| |   | `-- assert-plus@1.0.0| |   +-- ecc-jsbn@0.1.1| |   +-- jodid25519@1.0.2| |   +-- jsbn@0.1.0| |   `-- tweetnacl@0.14.1| +-- is-typedarray@1.0.0| +-- isstream@0.1.2| +-- json-stringify-safe@5.0.1| +-- mime-types@2.1.10| | `-- mime-db@1.22.0| +-- node-uuid@1.4.7| +-- oauth-sign@0.8.1| +-- qs@6.0.2| +-- stringstream@0.0.5| +-- tough-cookie@2.2.2| `-- tunnel-agent@0.4.2`-- source-map@0.5.3

例子

下面是一个简单的LESS示例。
hello.htm

<!doctype html>
<head><link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body><h1>Welcome to W3Cschool</h1><h3>Hello!!!!!</h3>
</body>
</html>

接下来，让我们创建一个与CSS非常相似的文件 style.less ，唯一的区别是它将以 .less 扩展名保存。 应在文件夹 nodejs 中创建文件 .html 和 .less 。

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1{
color: @primarycolor;
}
h3{
color: @color;
}

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

lessc style.less style.css

在这里插入图片描述
当您运行上述命令时，它将自动创建 style.css 文件。 无论何时更改LESS文件，都需要在cmd中运行上面的命令，然后更新 style.css 文件。

运行以上命令时， style.css 文件将具有以下代码:

style.css

h1 {color: #FF7F50;
}
h3 {color: #800080;
}

输出

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

  • 将上面的html代码保存在 hello.htm 文件中。

  • 在浏览器中打开此HTML文件，将显示如下输出。
    在这里插入图片描述

Less编译css工具

您可以使用Less编译成css工具进行测试
例如 less转译css
在这里插入图片描述

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力

相关文章：

Less 安装教程

文章目录 前言LESS的系统要求安装LESS例子输出Less编译css工具后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Sass和Less &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板…...

编程日记 2023/11/27 2:19:34

Java研学-多线程

一 名词解析 1 线程 : 控制指定APP(进程)执行的最基本单元(最小单位) 2 进程 : 硬件设备上的每一个应用程序 3 单线程 : 一个进程中只有一个线程执行,实际上基本没有这种情况 4 多线程 : 一个进程中至少有两个或两个以上的线程在执行 二 创建方式 1 共有三种:Thread类. R…...

编程日记 2023/11/27 2:18:33

【日常总结】如何禁止浏览器 http自动跳转成https

一、场景 二、问题 三、解决方案 3.1 chrome 浏览器 3.2 edge 浏览器&#xff1a; 3.3 Safari 浏览器 3.4 Firefox 浏览器 3.5 Microsoft Edge 一、场景 公司网站 http:// 谷歌浏览器中自动转换成 https:// 导致无法访问 二、问题 nginx配置ssl 443接口&#xff0c; ht…...

编程日记 2023/11/27 2:17:31

文本转语音：微软语音合成标记语言 (SSML) 文本结构和事件

​ SSML 的语音服务实现基于万维网联合会的语音合成标记语言版本 1.0。 ​ 语音服务支持的元素可能与 W3C 标准不同。 每个 SSML 文档是使用 SSML 元素&#xff08;或标记&#xff09;创建的。 这些元素用于调整语音、风格、音节、韵律、音量等。 下面是 SSML 文档的基本结构…...

编程日记 2023/11/27 2:16:28

计算机网络之物理层（数据通信有关）

一、概述 1.1物理层引入的目的 屏蔽掉传输介质的多样性&#xff0c;导致数据传输方式的不同&#xff1b;物理层的引入使得高层看到的数据都是统一的0,1构成的比特流 1.2.物理层如何实现屏蔽 物理层靠定义的不同的通信协议&#xff08;一般称通信规程&#xff09; 这些协议…...

编程日记 2023/11/27 2:15:27

安卓开发之HTTP API服务接口设计（基于okhttp3请求）

安卓中的请求 OkHttp3 是一个开源的 Java/Android HTTP 客户端库，由 Square 公司开发。它提供了简洁和高效 的 API ，用于进行 HTTP 请求、处理响应以及与服务器进行通信。 以下是 OkHttp3 的一些主要特点和功能: 简单易用: OkHttp3 提供了简洁的 API ，使得发送 HTTP 请求变…...

编程日记 2023/11/27 2:14:26

我的第一次SACC之旅

今年有很多第一次&#xff0c;第一次作为“游客”参加DTCC&#xff08;中国数据库大会&#xff09;&#xff0c;第一次作为讲师参与ACDU中国行&#xff08;成都站&#xff09;&#xff0c;第一次参加OB年度发布会&#xff08;包含DBA老友会&#xff09;&#xff0c;而这次是第一…...

编程日记 2023/11/27 2:13:23

Codeforces Round 908 (Div. 2)

Codeforces Round 908 (Div. 2) 文章目录 Codeforces Round 908 (Div. 2)ABCD A 获取对战的最后一个即为胜者 #include <bits/stdc.h>using namespace std;void solve() {int n;cin >> n;string s;cin >> s;cout << s[n-1] << endl; }int main…...

编程日记 2023/11/27 2:11:19

Java实现-数据结构 2.时间和空间复杂度

.如何衡量一个算法的好坏&#xff1a;时间复杂度和空间复杂度 算法效率分为时间效率和空间效率&#xff0c;时间效率称为时间复杂度&#xff0c;空间效率称为空间复杂度 时间复杂度 算法的时间复杂度是一个数学函数&#xff0c;它描述了算法的运行时间&#xff0c;一个算法执…...

编程日记 2023/11/27 2:09:15

Docker exec命令

docker exec &#xff1a;在运行的容器中执行命令。 语法&#xff1a; docker exec [OPTIONS] CONTAINER COMMAND [ARG...]OPTIONS说明&#xff1a; -d&#xff1a;分离模式&#xff1a; 在后台运行 -i&#xff1a;即使没有附加也保持STDIN打开 -t&#xff1a;分配一个伪终…...

编程日记 2023/11/27 2:08:14

可燃气体监测仪助力燃气管网安全监测，效果一览

城市地下管线是指城市范围内供应水、排放水、燃气等各类管线及其附属设施&#xff0c;它们是保障城市正常运转的重要基础设施且影响着城市生命线。其中燃气引发的事故近些年不断增加&#xff0c;由于燃气管线深埋地下环境复杂&#xff0c;所以仅仅依赖人工巡查难以全面有效地防…...

编程日记 2023/11/27 2:07:13

Kafka（二）在WSL搭建Schema Registry

目录 1 Avro与Schema Registry2 搭建Schema Registry2.1 下载Confluent并解压2.2 设置环境变量2.3 修改配置2.4 启动服务 3 API列表 1 Avro与Schema Registry Apache Avro 是一种高效的数据序列化系统&#xff0c;用于在不同的应用程序和平台之间传输和存储数据。它提供了一种…...

编程日记 2023/11/27 2:06:12

webrtc AEC 线性滤波 PBFDAF（均匀分块频域自适应滤波）介绍

计算一个脉冲响应和输入信号的卷积&#xff0c;除了使用原始的时域卷积以外&#xff0c;还有如下方法&#xff1a; FFT卷积的方法&#xff1a;对输入信号&#xff08;长度M&#xff09;和脉冲响应&#xff08;长度N&#xff09;分别补零到K&#xff08;K>MN-1)&#xff0c;…...

编程日记 2023/11/27 2:05:11

开源vs闭源，处在大模型洪流中，向何处去？

文章目录 一、开源和闭源的优劣势比较1.1 开源优势1.2 闭源的优势 二、开源和闭源对大模型技术发展的影响2.1 数据共享2.2 算法创新2.3 业务拓展2.4 安全性和隐私2.5 社会责任和伦理 三、开源与闭源的商业模式比较3.1 盈利模式3.2 市场竞争3.3 用户生态3.4 创新速度 四&#xf…...

编程日记 2023/11/27 2:04:10

web前端之vue和echarts的堆叠柱状图顶部显示总数、鼠标悬浮工具提示、设置图例的显示与隐藏、label、legend、tooltip

MENU 效果图htmlJavaScripstyle解析 效果图 html <template><div><div><div id"idStackedColumnChart" style"width: 100%; height: 680px"></div></div></div> </template>JavaScrip export default {…...

编程日记 2023/11/27 2:02:07

Excel表中合并两个Sheet的方法？

按AltF11&#xff0c;调出Visual Basic 界面。 在左侧窗口中&#xff0c;右键选择“插入”—“模块”&#xff1a; 将如下代码粘贴进去&#xff0c;点击运行按钮&#xff0c;完成数据表合并。 Sub MergeAllSheetsInThisWorkbook() On Error Resume Next Application.ScreenU…...

编程日记 2023/11/27 2:00:04

1个10进制数转为2进制和转为8进制， 各位上数字后2进制的值与8进制的值相同的值有 1 8 9 64 问第23个值是多少？

1个10进制数转为2进制和转为8进制&#xff0c; 各位上数字后2进制的值与8进制的值相同的值有 1 8 9 64 问第23个值是多少&#xff1f; #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <malloc.h> #include<cmath&g…...

编程日记 2023/11/27 1:59:01

27、Nuxt.js项目整合ElementUI组件库

参考element-ui官网安装组件库 项目中新建插件引入element-ui plugins\element-ui.js import Vue from vue; import ElementUI from element-ui;Vue.use(ElementUI);nuxt.config.js plugins: ["/plugins/element-ui.js"],build: {// 将位于 node_modules 目录下的…...

编程日记 2023/11/27 1:56:58

设计问卷调查问题的9大技巧！技巧1：明确目标与问题

我们在设计问卷调查时要考虑很多因素&#xff0c;其中问卷问题是需要关注的重要因素之一。有效的问题能够帮助我们获取到有用的信息&#xff0c;让问卷结论更准确。怎么设计问卷调查的问题呢&#xff1f;本文就为大家提供几个设计问题时的神仙技巧&#xff01; Tip1&#xff1…...

编程日记 2023/11/27 1:55:56

java代码调用twitter-api用例实战

一、申请twitter开发者账号 首先先申请twitter开发者免费的API&#xff0c;要填写申请的内容&#xff0c;放心大胆地写&#xff0c;申请完&#xff0c;会提供免费的API接口。 以下是我申请到的三个免费API 申请完开始进行测试调用。 读官方文档账户认证那块&#xff1a;https…...

编程日记 2023/11/27 1:53:54

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/8 4:37:19

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35