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

Less 安装教程

news 2025/11/24 8:07:17

文章目录

  • 前言
  • 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

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/11/19 11:56:25

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/11/19 11:48:51

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2025/11/16 22:45:33

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/11/22 12:02:51

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/10/14 9:02:38

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/11/24 6:01:08

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2025/11/23 10:31:48