Sass与Less

SASS是一种CSS开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发变得简单和可维护，后缀名.scss
SASS是用Ruby语言写的，两者的语法没有关系，使用时先安装Ruby，再安装SASS。

安装好Ruby后，输入gem install sass就可以使用了。

sass test.scss test.css   //将scss文件转化为css格式并保存成文件

Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。Less可以运行在Node或者浏览器端。后缀名.less
安装 npm instll –g less

less test.less test.css  //将less文件转化为css格式并保存为文件

less的引用

(1)可直接在script标签中引入less.js，实现浏览器中将less预编译为CSS样式

(2)同时less也存在内联样式和外联样式

内联样式：

<style type=’text/less’>
//less代码
</style>

外联样式

<link rel=’stylesheet/less’ type=’text/css’ href=’xxx.less’/>

SASS与LESS的区别

（1）编译的环境不一样，SASS使用的是Ruby环境，是在服务端处理的。LESS需要引入less.js来处理LESS代码输出CSS到浏览器，也可以在开发环节使用LESS，然后编译成css文件

（2）变量符不一样，LESS是@，Sass是$，而且变量的作用域也不一样。

（3）LESS没有输出设置，Sass提供4种输出选项，nested（嵌套缩进的CSS代码，是默认值），compact（简洁格式的css代码），compressed（压缩后的css代码）和expanded（没有缩进的、扩展的css代码）。在生产环境中一般使用compressed，如sass –style compressed test.sass test.css。

（4）Sass支持条件语句，可以使用if else，for循环等，而LESS不支持。

（5）SASS引用的外部文件命名必须以_开头。文件名如果以下划线开头，Sass会认为该文件是一个引用文件，不会将其便以为CSS文件。LESS引用外部文件和css中的@import没有什么差异。

（6）Sass和less的工具库不同

Sass有工具库Compass（如同JavaScript和Jquery的关系），Compass在SASS的基础上封装了一系列有用的模块和模板，补充强化了SASS的功能。

LESS有UI组件库Boostrap，boostrap的样式文件部分源码才引用了LESS的语法编写。

总结：SASS和LESS都是基于CSS之上的高级语言，目的是使得CSS开发更加灵活，更加强大。编译SASS要安装Ruby，而Ruby在国内访问不了，因此在实际开发中更加倾向于LESS。