scss、sass、less的对比与区别

什么是Sass和Less？

　　sass和less都属于CSS预处理器。

　　css预处理定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增长了一些编程的特性，将CSS做为目标生成文件，而后开发者就只要使用这种语言进行CSS的编码工做。通俗地说就是“用一种专门的编程语言，进行Web页面样式设计，再经过编译器转化为正常的CSS文件，以供项目使用”。

 

为何使用CSS预处理器？　　

　　CSS只是一个标记语言，不是编程语言，所以不能够自定义变量，不能够引用等等。

css有具体如下几个缺点：

　　语法不够强大，好比没法嵌套书写，致使模块化开发中须要书写不少重复的选择器；

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

　　这就致使了咱们在工做中无故增长了许多工做量。而使用CSS预处理器，提供CSS缺失的样式层复用机制、减小冗余代码，提升样式代码的可维护性。大大提升了开发效率。

　　可是，CSS预处理器也不是万金油，CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让咱们开发工做流中多了一个环节，调试也变得麻烦。更大的问题在于，预编译很容易形成后代选择器的滥用。

 

Sass和Less的区别

不一样之处

Less环境较Sass简单

　　　Sass的安装须要安装Ruby环境，Less基于Javascript，是须要引入Less.js来处理代码输出css到浏览器，也能够在开发环节使用Less，而后编译成css文件，直接放在项目中。

Less使用较Sass简单

　　　Less并无裁剪CSS原有的特性，而是在现有CSS语法的基础上，为CSS加入程序式语言的特性。

Sass功能较Less强大

　　　一、sass有变量和做用域

　　　二、sass有函数的概念

　　　三、进程控制

　　　　　条件、循环遍历、继承、引用

　　　四、数据结构

　　　　　数组、map

Less和Sass处理机制不同

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

关于变量在Less和Sass中的惟一区别就是Less用@，Sass用$

 

相同之处

Less和Sass在语法上有些共性，好比下面这些：

一、混入(Mixins)——class中的class； 二、参数混入——能够传递参数的class，就像函数同样； 三、嵌套规则——Class中嵌套class，从而减小重复的代码； 四、运算——CSS中用上数学； 五、颜色功能——能够编辑颜色； 六、名字空间(namespace)——分组样式，从而能够被调用； 七、做用域——局部修改样式； 八、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。