Less和Sass的原理和用法

一、原理

1.1 Less定义：是一种动态的样式语言,使CSS变成一种动态的语言特性，如变量、继承、运算、函数。Less既可以在客户端上面运行(支持IE6以上版本、Webkit、Firefox),也可以在服务端运行(Node.js)

1.2 SaSS定义：是一种动态样式语言，SaSS里面的语法属于缩排语法，对于之前的css相比，多出了很多功能，更容易阅读

1.3 预处理器。Less和SaSS都属于预处理器，它会定义一种新的语言，其总体思想是为CSS增加一些编程的特性，将 CSS 作为目标生成文件，之后开发者就只要使用这种语言进行CSS的编码工作。

二、两者区别

  2.1 Less和Sass处理机制不一样

• 前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点。

  2.2 变量符：

•   Less是@
•  Sass是$

    2.3 输出设置
           Less没有输出设置，而Sass有4种输出选项，如下
               nested：嵌套缩进的css代码
               expanded：展开的多行css代码
               compact：简洁格式的css代码
                compressed：压缩后的css代码

2.4 Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持

2.5 Sass功能较Less强大

• sass有变量和作用域
• sass有函数的概念
• 进程控制
• 数据结构

三、总体优点

3.1 提供CSS缺失的样式层复用机制
3.2 减少冗余代码
3.3 提高样式代码的可维护性
3.4 结构清晰，便于扩展可以方便的屏蔽浏览器私有的语法差异
3.5 轻松实现多重继承，完全兼容了CSS代码，提高了开发效率。

四、为什么选择使用Sass而不是Less

• Sass有更成熟的框架，比如说Compass，而且有很多框架也使用Sass，比如说Foundation；
• bootstrap（Web框架）最新推出的版本4，使用的就是Sass，可以看出sass有更多市场价值。
• 就国外讨论的热度来说，Sass绝对优于less；
• 在国内less集中的教程是less中文官网，而Sass的中文教程，在国内较为普遍；
• sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护；
• scss对sass语法进行了改良，sass 3变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进;

原文链接：面试题之Less和SaSS的原理和用法_less和sass的区别面试题_雨落听风清的博客-CSDN博客