1. Less 入门_less.min.js-优快云博客

本文链接：https://blog.youkuaiyun.com/shiyibushiwei/article/details/125660757

本文介绍了CSS的局限性，重点阐述LESS如何通过引入变量、混入、运算和函数提升CSS编写效率。讲解了LESS的基本概念、使用方法以及其在前端开发中的应用，旨在帮助开发者更好地理解和利用LESS来优化CSS工作流程。

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

1.1 有了 CSS，为什么还需要 Less

CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

1.2什么是 Less（重点）

LESS CSS 是一种动态样式语言，属于 CSS 预处理语言的一种，它使用类似 CSS的语法，为 CSS 的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS 的编写和维护。

LESS CSS 可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
说明：本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

1.3 如何使用Less

Less不能在客户端直接执行，需要转换成标准的CSS语法。下面列出了几种Less的使用方法：

**命令行**

在 Node.js 环境中使用 Less ：

npm install -g less
> lessc styles.less styles.css

在浏览器环境中使用 Less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

1.4 Less 初体验

Less 快速入门 | Less.js 中文文档 - Less 中文网

从官网下载一份 less.js (less.min.js )，将 less.js(less.min.js)放到 js 目录中
自己写一个简单的示例 less 文件，命名为：style.less，内容如下：

@color:red;
#header {
	color: @color;
}
h2 {
	color: @color;
}

3、 index.html 内容如下：

<html>
  <head>
    <link rel="stylesheet/less" type="text/css" href="less/style.less">
    <script src="js/less.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="header">
    	这是网页的头部
    </div>
    <h2>
    	这是标题部分
    </h2>
  </body>
</html>