Less和Sass的区别

Less和Sass区别

1、Less是一门CSS预处理语言，css是一种用来表现HTML或XML等文件样式的计算机语言。
2、less扩展了CSS语言，增加了变量、Mixin、函数等特性。
3、css可以被浏览器直接识别，less需要先编译为css。
4、编译环境不一样。
Sass是在服务端处理的，以前是Ruby，现在是Dart-Sass或Node-Sass，而Less是需要引入less.js来处理Less代码输出CSS到浏览器，也可以在开发服务器将Less语法编译成css文件，输出CSS文件到生产包目录，有npm less, Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
5、变量符不一样，Less是@，而Scss是$。
6、输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
输出样式的风格可以有四种选择，默认为nested
nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
7、Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
8、引用外部CSS文件
scss@import引用的外部文件如果不想编译时多生成同名的.css文件，命名必须以_开头, 文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为同名css文件。
Less引用外部文件和css中的@import没什么差异。
9、Sass和Less的工具库不同
Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。
10、安装体验不同
用npm 或者yarn 安装less非常容易，而安装sass, Ruby官网在国内访问不了,所以个人在实际开发中更倾向于选择Less。