sass/scss、less

一、Sass/Scss、Less是什么?
Sass(Syntactically Awesome Stylesheets)是一种动态语言，Sass语法属于缩排语法，比css多很多玩法(如在sass中可以放变量、嵌套、运算，混入(Mixin)、继承、颜色处理、函数等)
sass与scss是什么关系?
.sass文件，如

#sidebar
  width: 30%
  background-color: #faa

.scss文件，如

#sidebar {
  width: 30%;
  background-color: #faa;
}

sass的缩进语法，对于写惯css文件的web开发者来说，很不直观，也不能将css代码加入到sass里面，因此对sass语法进行了改良，称为了scss。与原来的语法兼容。
Less 也是一种动态样式处理器，同样可以在less中加入变量、继承、运算、函数等。less可以运行在客户端，也可以运行在服务器端(借助node.js)。

二、sass/less和less的区别

1、编译环境不一样
sass安装需要ruby环境，是在服务器端处理的，而less需要引入less.js文件来处理less代码输出css到浏览器。也可以使用考拉软件，直接将less文件，编译为css文件
2、定义变量符号不一样，less使用的是@,sass/scss使用的是$.
3、输出设置，less没有输出设置，Sass提供4种输出选项:nested(嵌套缩进的css),compact(简洁格式的css代码),expanded:展开的多行css代码，compressed:压缩后的css代码。
4、sass支持条件语句，可以使用if{}else{},for{}循环等。而less不支持
5、引入外部文件时，scss外部文件名，必须以开头，sass不能以开头，否则不会编译为css
6、sass和less的工具库不同
sass有工具库compass,简单说，sass和compass的关系有点象js和jQuery。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。