前端入门23-CSS预处理器（Less&Sass）

声明

本篇内容梳理自以下几个来源：

• Github:smyhvae/web
• Bootstrap网站的 less 文档
• Sass中文网

感谢大佬们的分享。

正文-CSS预处理（less&Sass）

CSS预处理

什么是 CSS 预处理？为什么要有 CSS 预处理？

这里就讲讲这两个问题，写过 CSS 应该就会比较清楚，虽然我才刚入门，但在写一些练手时就已经有点感觉了：写 CSS 后，很难维护，维护基本要靠注释来，而且由于 HTML 文档中标签的嵌套层次复杂，导致写 CSS 的选择器时也很费劲，尤其是在后期为某部分标签新增样式时，总会不知道到底应该在 CSS 文件中哪里写这个选择器，这个选择器是否会与前面冲突。

最有感觉的一点是，CSS 代码基本没法复用，一个页面一份 CSS，每次都需要重写，只是很多时候，可以直接去旧的里面复制粘贴。

有这么些问题是因为 CSS 本身并不是一门编程语言，它只是一个标记语言，静态语言，不具备编程语言的特性，所以写容易，但维护会比较难。

这个时候，CSS 预处理器就出现了，其实应该是说 Sass 和 Less 这类语言出现了。

Sass 和 Less 这类语言，其实可以理解成 CSS 的超集，也就是它们是基于 CSS 原本的语法格式基础上，增加了编程语言的特性，如变量的使用、逻辑语句的支持、函数等。让 CSS 代码更容易维护和复用。

但浏览器最终肯定是只认识 CSS 文件的，它并无法处理 CSS 中的那些变量、逻辑语句，所以需要有一个编译的过程，将 Sass 或 Less 写的代码转换成标准的 CSS 代码，这个过程就称为 CSS 预处理。

所以，CSS 预处理器其实只是一个过程的称呼，主要工作就是将源代码编译并输出标准的 CSS 文件，而这个源代码可以用 Sass 写，也可以用 Less，当然还有其他很多种语言。

那么，到底哪一种语言好，我还没能力来讨论，反正存在即有理，每种语言总它的优缺点、总有它的适用场景。

下面，主要就来介绍下其中的两种语言：Less 和 Sass。

我觉得，掌握 CSS 预处理的关键，其实也就两点，一是掌握语言的语法、二是清楚怎么编译成标准的 CSS 文件；语法基本都不会很难，编译一般需要配置一些环境，因为我使用的开发工具是 WebStrom，所以会介绍下 WebStrom 上的配置。

Less

使用

Less 写的 CSS 文件后缀名为 .less，但浏览器并不认识 less 文件，所以最后需要转换成 css 文件，有两种方式：

• 借助 less.js，程序运行期间，浏览器会自动借助 less.js 来解析 less 文件内的代码，转成 css 标准语法

这种方式，不需要配置任何其他环境，只需要下载 less.js，并在项目中使用即可，但有几点需要注意：

HTML 文档通过 link 标签引入 less 文件时，需要将 link 标签的 rel 属性设置为 stylesheet/less，否则无效；

而且，用