随着前端技术的不断发展，Css 也延伸出了很多新的语言，Less 与 Sass 就是其中两种，简单来说，他们都是 Css 下面我们就仔细讲解一下这三种语言的区别。
Css
Css（层叠样式表）是一种非程序式语言，用来表现 html 或 xml 等文件样式的计算机语言，对网页中字体、颜色、背景、图像及其他各种元素的控制，使网页能够完全按照设计效果来显示。Css 入门学习使用非常直观方便，但是对于一些比较复杂或者重用性比较强的项目来说，由于 Css 没有变量、函数、Scope（作用域）等，需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。
为了方便开发者的开发与代码的维护，于是出现了 Css 预处理器。
Css 预处理器
什么是 Css 预处理器
Css 预处理器是一种脚本语言，增加了一些编程的特性，用一种专门的编程语言来进行 Web 页面样式设计，然后再转换为正常的 Css 样式，进而实现构建动态 Css 样式。Sass 和 Less 就是两种常见的 Css 预处理器。
Css 预处理器的学习是有相似地方的，一旦我们学习了一个 Css 预处理器，如果需要切换到另一个 Css 预处理器学习是不难的。
优点与缺点
Css 预处理器增加了编程的特性，无需考虑浏览器兼容问题，支持变量、嵌套、逻辑等，可让编写代码更加高效与简洁，便于后期维护。而调试难度与成本也相对 Css 更高。
Sass
英文全称：Syntactically Awesome Stylesheets, Sass 诞生于 2007 年，最早也是最成熟的 Css 预处理器。使用Ruby 编写，是一种对 Css 的一种扩展提升，增加了规则、变量、混入、选择器、继承等等特性。
Sass 技术的文件的后缀名有两种形式：.sass 和 .scss ，其实两者都是同一种东西，两种均可以可以通过编译生成浏览器能识别的 Css 文件。.sass 文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。后来受 Less 影响诞生了 .scss ，兼容全部 Css 语法。
.sass 语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color.scss 语法
$font-stack: Helvetica, sans-serif; //定义变量
$primary-color: #333; //定义变量
body {
font: 100% $font-stack;
color: $primary-color;
}编译出来的 css
body {
font: 100% Helvetica, sans-serif;
color: #333;
}Sass 中文网：https://www.sass.hk/
Less
2009年开源的一个项目，受 Sass 的影响较大，但又使用 Css 的语法，让大部分开发者和设计师更容易上手。Less 保留了 Css 的全部功能，同时提供了多种方式能平滑的将写好的代码转化成标准的 Css 代码，可以随时切换到 Css 的语法进行书写，但编程功能不如 Sass 丰富。
Less 技术的后缀名只有一种，就是.less，语法规则和 Sass 大同小异。
Less 语法
@font-stack: Helvetica, sans-serif; //定义变量
@primary-color: #333; //定义变量
body {
font: 100% @font-stack;
color: @primary-color;
}编译出的Css
body {
font: 100% Helvetica, sans-serif;
color: #333;
}Less中文网： http://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 类似的性能。
总结：
不管是 Sass 还是 Less，都可以视为一种基于 Css 之上的高级语言，其目的是使得 Css 开发更灵活和更强大，Sass 的功能比 Less 强大，基本可以说是一种真正的编程语言了，Less 则相对清晰明了，易于上手，对编译环境要求比较宽松。