CSS

CSS(层叠样式表)是一种非程序式的语言，我的理解就是对网页中的元素进行一个美化或者相当于小鸟中的羽毛。虽然它学习起来比较简单，也比较直观，但是仔细发现你会觉得它复用性太差了，会导致你后期维护起来很不方便。

Sass

最早也是最成熟的CSS预处理器，它增加了规则、变量、混入、选择器、继承等特性。

Sass技术文件后缀名有两种形式：.sass和.scss，其实两者都是同一种东西，它们均可以最终编译成.css文件。

Sass官网：Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

Less

Less保留了Css的全部功能，同时提供了多种方式能平滑的写好的代码转化成标准的Css代码，可以随时切换到Css的语法进行书写。Less 技术的后缀名只有一种，就是.less，语法规则和 Sass 大同小异。

Less中文网：收起 中文网 (lesscss.cn)

Sass与Less之间的区别

1、编译环境不同

Sass 的安装需要 Ruby 环境，是在服务端处理的，而 Less 是需要在服务端引入 less.js 来处理 Less 代码输出 Css 到浏览器，也可以在开发环节使用 Less，然后编译成 Css 文件，直接放到项目中。

2、编写变量的方式不同

Sass 使用 $ ，而 Less 使用 @ 。

3、在 Less 中，仅允许循环数值。

在 Sass 中，我们可以遍历任何类型的数据。但在 Less 中，我们只能使用递归函数循环数值。

4、Sass 支持条件语句，可以使用 if{}else{},for{} 循环等等，而 Less 不行

5、引用外部 Css 文件

Sass 引用外部文件必须以开头，文件名如果以下划线形状，Sass 会认为该文件是一个引用文件，不会将其编译为 Css 文件。Less 引用外部文件和 Css 中的@import 没什么差异 6、输出设置不同

Less 没有输出设置，Sass 提供4种输出选项：
nested：嵌套缩进的 Css 代码(默认) ；
expanded：展开的多行 Css 代码；
compact：简洁格式的 Css 代码；
compressed：压缩后的 Css 代码。

7、Sass 和 Less 的工具库不同

Sass 有工具库 Compass，简单说，Sass 和 Compass 的关系有点像 Javascript 和 jQuery 的关系，Compass 是 Sass 的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了 Sass 的功能。Less 有 Preboot.less，Less Mixins，Less Elements，gs 和 Frameless。Less 的软件支持比 Sass 更加分散，导致许多不同的扩展选项可能不会以相同的方式运行。对于项目，我们可能需要所有列出的扩展以获得与 Compass 类似的性能。