Css、Sass和less的区别是什么

背景
CSS（层叠样式表）是一门非程序式语言，入门学习使用非常直观方便，但是对于一些比较复杂或者重用性比较强的项目来说，因为CSS没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码。为了方便前端开发的工作量，出现了sass和less。
SASS

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。

SASS是对CSS3(层叠样式表)的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像，几乎一样)，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

LESS

LESS是一种由Alexis Sellier设计的动态层叠样式表语言。受Sass所影响，同时也影响了Sass的新语法:SCSS。

LESS是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。受益于JavaScript，LESS可以在客户端上运行(IE6+、Webkit、Firefox)，也可以在服务端运行(Node.js、Rhino)。

SASS和LESS的使用
传统的css可以直接被html引用，但是sass和less由于使用了类似JavaScript的方式去书写，所以必须要经过编译生成css，而html引用只能引用编译之后的css文件，虽然过程多了一层，但是毕竟sass/less在书写的时候就方便很多，所以在我们使用sass/less之前，只要我们提前设置好，就可以直接生成对应的css文件，而我们只需要关心我们的sass/less文件即可。
Sass的语法规则，可以参考下SASS中文网：<u>https://www.sass.hk/</u>。
SASS技术的文件的后缀名有两种形式：.sass和.scss。其实两者都是同一种东西，两种均可以可以通过编译生成浏览器能识别的css文件。这两种的区别：
1.
扩展名不同；
2.

SCSS 的语法书写和CSS 语法书写方式非常类似，.sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号；

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;
}
LESS技术的后缀名只有一种，就是.less，语法规则和sass大同小异，详细可以参考less中文网<u>http://lesscss.cn/</u>。
LESS使用分为两种：
1.直接在浏览器中引入less编译器js文件和less文件，直接渲染编译为css文应用到当前页面中。
2.less文件通过编译成为css之后引用css；
/ Less /
@color: #999;

@bgColor: skyblue;//不要添加引号

@width: 50%;

#wrap {
color: @color;
width: @width;
}
/ 生成后的 CSS /
#wrap {

color: #999;

width: 50%;
}

关于SASS和LESS的概念就是这样，如果想要继续深入了解更详细语法，恐怕就得多花功夫了，不过，学好SASS和LESS对你的前端发展绝对是有很大帮助的。加油，努力成为前端大神。