SASS和LESS是什么？如何使用？

这里是修真院前端小课堂，每篇分享文从

【SASS和LESS是什么？如何使用？ 】

大家好，我是IT修真院北京分院第20期的学员王野，一枚正直纯洁善良的程序员

今天给大家分享一下，修真院官网JS任务4，深度思考中的知识点——SASS和LESS是什么？如何使用？

一、背景介绍

CSS是我们学习前端开发必须掌握的技巧，叫做层叠样式表。

你可以用它开发网页样式，但是又一个很大的不足，就是没办法编程。也就是说，

CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，

CSS是一件很麻烦的东西。它没有变量，也没有条件语句，

只是一行行单纯的描述，写起来相当费事。

很自然地，有人就开始为CSS加入编程元素，

这被叫做"CSS预处理器"（css preprocessor）。通俗来讲：

“CSS预处理器用一种专门的编程语言，进行Web页面样式的设计，

然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，

无需考虑浏览器的兼容性问题”。

二、知识剖析

2.1 LESS是什么？

根据维基百科上的介绍，其实 LESS 是 Alexis Sellier 受 SASS 的影响创建的开源项目。

当时 SASS 采用了缩进作为分隔符来区分代码块，而不是 CSS 中广为使用的括号。

为了让 CSS 现有用户使用起来更为方便，Alexis 开发了 LESS 并提供了类似的功能。

在一开始，LESS 的解释器也同样是由 Ruby 编写，

后来才转而采用了 JavaScript. LESS 代码既可以运行在客户端，也可以运行在服务器端。

在客户端只要把 LESS 代码和相应的 JavaScript 解释器在同一页面引用即可；

而在服务器端，LESS 可以运行在 Node.js 上，也可以运行在 Rhino 这样的

JavaScript 引擎上。

2.2 如何使用LESS？

LESS语法

LESS 做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，

而是在现有的 CSS 语法之上，添加了许多其它的功能，

在语法方面，LESS与CSS较为接近，一个合法的C