CSS 笔记（十二）：预处理器 —— Less

最新推荐文章于 2025-11-11 15:56:00 发布

原创

最新推荐文章于 2025-11-11 15:56:00 发布 · 1.7k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了CSS预处理器的概念，重点讲解了Less的使用，包括变量、运算、混合、注释、预编译、导入等特性。Less允许开发者创建可复用的样式，提升CSS的可维护性和效率。通过实例展示了Less如何简化CSS编写，如变量赋值、作用域、运算、混合使用及条件判断等。

CSS 预处理器就是使用某一种语言为 CSS 增加一些动态语言的特性，使用 CSS 预处理器可以使 CSS 具有简洁，适应性强，代码直观等优点，常见的 CSS 预处理器如下：

Less（Leaner Style Sheets）是一种 CSS 预处理语言，为 CSS 赋予了动态语言的特性，扩展了 CSS 语言，增加了变量、Mixin（混合）、嵌套、函数和运算等特性，使 CSS 更易于维护和扩展

编写（引入） Less 代码
- 内嵌方式时，必须说明文本类型
  - <style type="text/less">...</style>
- 外链方式时，以 .less 为文件扩展名，并以 link 导入
  - <link rel="stylesheet/less" type="text/css", href="style.less">
引入 less.js 文件
- <script src="./js/less.js"></script>

使用 Less 时，必须先引入 Less 代码，之后引入 less.js 文件，此外，使用外链方式引入 .less 文件时，必须在服务端环境才能生效

使用引入的方式时，将损耗浏览器性能，可以使用预编译将 .less 文件编译为 .css 文件，之后引入 .css 文件即可

使用此方式不用引入 less.js 文件，也无需在服务端环境运行

类似于 JavaScript，Less 也有单行注释与多行注释

// 单行注释

/*
    多行注释
*/

必须注意的是，将 .less 文件编译为 .css 文件时，单行注释并不参与编译，因此在 .css 文件中不存在 .less 文件中的单行注释

类似于 JavaScript，Less 也有变量，其特性与 ES6 之前使用 var 相似，示例如下：

@w: 200px;  // 初始化
@h: @w; // 赋值
@bc: pink;

.box {
    @bc: blue;  // 作用域
    width: @w;
    height: @h;
    background-color: @b