前端sass和less的区别（sass和less哪个好用）

sass和less地出现大大的提升了代码的复用性，按常理来说它们也是css，被称为CSS扩展语言（简称强化版的css），理论来说sass也需要编译成为css才能在浏览器上面运行的。那么为什么会出现sass和less呢？开发者应该选择哪一个预处理语言来开发呢？

编译语言让开发变得更加高效

众所周知，css的诞生就是为了作为网站的样式所用（你可以试试把一些网站的css去掉，就能看到网站的用户体验感基本为0），其实原理都差不多，saas和less无非就是在css上面加入了变量等，它能让你的前端开发工作更加的轻松。

为什么要选择saas和less预处理语言？

css面临的下面的几个问题：

• 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；

• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。



saas和less之间的区别

一：编译方式不同：less和sass都是css的拓展语言，最主要的区别是less是通过Javascript编译，而sass是通过ruby编译的，如果没有引入前端工程化，less会消耗客户端性能，sass会消耗服务端性能，但是引入前端工程化的话，gunt，gulp，webpack等，less和sass在打包阶段都会转化成css，所以不会有区别，只是sass是基于ruby，所以每次npm的时候相对慢一点点。

二：定义变量时候不同：less的定义变量是用@，而sass则用跟php一样的定义方式$。

三：混合模式的不同：Less中使用混合时，只需在classB中根据classA的命名来是用；Sass中首先在定义混合时需要使用@mixin命令，其次在调用时需要使用@include命令来引入之前定义的混合。

四：语法使用上的不同：比如变量的作用域等。



新手建议用less，有经验的程序员用saas开发

Sass有很多可用的方法和逻辑。例如：条件和循环语句。LESS也可以做到，但不是很高效且不直观。像LESS一样，Sass也内置了一些非常友好的函数，像颜色，数字，还有变量列表。

Sass用户可以使用功能强大的Compass库。这些库LESS用户也可以用，但并不完全一样，因为这是由一个庞大的社区来共同维护的。Compass有非常强大的特性，像自动生成图片切片（CSS Sprites)，传统浏览器支持，还有对CSS3的跨浏览器支持等。

Compass同样允许你使用外部框架像Blueprint, Foundation 或 Bootstrap。这也意味着你可以非常容易地使用你喜欢的框架而不需要掌握各种不同的工具。

预处理语言也不是万能的，因为css是直接写完可以在浏览器可以解析的，但是例如saas就需要编译完之后才能运行的，如果并非大型的网站项目开发的话，我觉得没必要用saas等预处理语言。