本文主要解答以下问题，供前端开发新手参考。1.什么是Sass和Less？2.为什么要使用CSS预处理器？3.Sass和Less的比较4.为什么选择Sass而不是Less？什么是Sass和Less？Sass和Less都是CSS预处理器，那么什么是CSS预处理器呢？CSS预处理器定义了一种新语言。其基本思想是使用一种特殊的编程语言为CSS添加一些编程特性，以CSS为目标生成文件，然后开发者只需要使用这种语言进行CSS编码工作。换成通俗易懂的话，就是“用专门的编程语言设计网页样式，然后通过编译器转换成普通的CSS文件供项目使用”。为什么要使用CSS预处理器？作为前端开发者，大家都知道Js可以自定义变量，而CSS只是一种标记语言，不是编程语言，所以不能自定义变量、引用等。CSS有以下缺点：语法不足够强大，比如嵌套写法，导致在模块化开发中需要写很多重复的选择器；没有可变合理的样式复用机制，所以逻辑上相关的属性值必须以字面量的形式重复输出，难以维护。这导致我们在工作中无缘无故地增加了很多工作量。CSS预处理器的使用提供了CSS所缺乏的样式层重用机制，减少了冗余代码，提高了样式代码的可维护性。大大提高了我们的开发效率。然而，CSS预处理器并不是万能的。CSS的优点是方便使用，随时随地调试。预编译CSS这一步的加入，给我们的开发流程增加了一个环节，调试也变得更加麻烦。一个更大的问题是预编译很容易导致滥用后代选择器。所以我们在实际项目中衡量预编译方案时，还是要思考CSS预处理器是否解决了比额外维护开销更大的麻烦。Sass和Less的区别1.Less环境比Sass简单。安装Cass需要安装Ruby环境。Less基于JavaScript。需要引入Less.js来处理代码并输出css到浏览器。你也可以在开发过程中使用Less。然后编译成css文件，直接放到项目中。有less.app、SimpleLess、CodeKit.app等工具，也有在线编辑地址。2、Less的使用比Sass简单。LESS并没有砍掉CSS原有的特性，而是在现有CSS语法的基础上，为CSS添加了过程化语言的特性。只要了解CSS的基础知识，就很容易上手。3、在功能上，Sass比Less稍微强大①Sass有变量和作用域。$变量，如php；#{$variable}像红宝石；变量分为全局和局部，并有优先级。②sass有函数@function和@return的概念以及函数参数（和可变参数）可以让你像js开发一样封装你想要的逻辑。@mixin类似于function，但是缺少function那样的编程逻辑。它更多的是提高css代码段的可重用性和模块化，也是用的最多的。Ruby提供了非常丰富的内置原生API。③流程控制：条件：@if@else；循环遍历：@for@each@while继承：@extend引用：@import④数据结构：$listtype=array;$地图类型=对象；其余还有string、number、function等类型4、Less和Sass的处理机制不同前者由客户端处理，后者由服务端处理。相比之下，前者的解析会比后者慢5.关于Less和Sass中的变量，唯一的区别是Less使用@，Sass使用$。相同点Less和Sass在语法上有一些共同点，例如：1.Mixins——类中类；2.参数混合——可以传递参数的类，就像函数一样；3.嵌套规则——类嵌套在Classes中，减少代码重复；4.运算——CSS中用到数学；5.颜色功能——可编辑颜色；6.Namespace——分组样式，以便调用；7.范围——部分修改样式；8.JavaScript赋值——在CSS中使用JavaScript表达式赋值。为什么选择使用Sass而不是Less？1、Sass在市场上有一些成熟的框架，比如Compass，还有很多框架也在使用Sass，比如Foundation。2.从国外的讨论热度来说，Sass肯定比LESS好。3.就学习教程而言，Sass教程比LESS好。国内以LESS为主的教程是LESS中文官网，Sass中文教程在国内也逐渐普及。4.Sass也是成熟的CSS预处理器之一，由稳定而强大的团队维护。5、同时Scss改进了sass的语法，Sass3变成了Scss（sassycss）。兼容原有语法，只需将原有的缩进替换为{}即可。6、bootstrap（Web框架）最新版本4使用Sass。
