一.背景介绍

预处理器

CSS 预处理器是一种语言，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。

我们最常用的预处理器有scss和less

二.知识剖析

SASS背景

sass诞生于2007年，最早也是最成熟的一款CSS预处理器语言。

现在的sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在sass3之后的版本都支持这种语法规则。目前我们所称的sass一般指语法更为严格和友好的scss。

LESS背景

2009年开源的一个项目，受sass的影响较大，使用CSS的语法,在很多流行的框架和工具中已经能经常看到less的身影了（例如Twitter的Bootstrap框架就使用了less）。

当时sass和现在的scss不同，采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更加方便，Alexis开发了less并提供了类似CSS的书写功能。

三，.常见问题

问题一：SCSS和LESS有什么不同

我们知道scss和less相似，它们都可以使用变量、常量、嵌套、混入、继承等功能，可以更有效有弹性的写出CSS，下面我们看看它们之间的差异。

四，解决方案

A.安装

SASS

sass基于Ruby语言开发而成， 因此安装sass前需要安装Ruby。

LESS

less安装直接引入less和js文件即可，js放在less之后：

B.变量

B.变量

sass 是以$开头定义的变量，如：$mainColor: #963;

less 是以@开头定义的变量，如 @mainColor: #963;

C.作用域

sass 没有局部变量，满足就近原则。

less 中{}内定义的变量为局部变量。 作用域和其他程序语言中的作用域非常的相同， 他首先会查找局部定义的变量，如果没有找到， 会像冒泡一样，一级一级往下查找，直到根为止，

D.混合（MIXINS）

sass的混合：sass样式中声明Mixins时需要使用“@mixin”命令， 在选择器调用定义好的Mixins需要使用“@include”。

less 的混合：在less中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。

两者编译出的值相同

两者编译出的值相同

两者编译出的值相同

E.嵌套

两者写法相同

F.继承

编译后

G.高级语言

sass对条件语句和循环语句的处理要比less语言强大。具有真正的语言处理能力。

五.编码实战

六.拓展思考

还有什么好的预处理器语言？

stylus，2010年产生于Node.js社区,可同时使用缩进和括号写法，写法非常灵活，扩展性与scss相当，高于less，但由于规定过少，可能容易让人混乱。

我该如何选择CSS预处理器

1，sass诞生是最早也是最成熟的CSS预处理器，有Ruby社区和Compass支持；Stylus早期服务于Node JS项目，在该社区得到一定支持者；less出现于2009年，支持者远超于Ruby和Node JS社区；

2，sass和stylus扩展性更强，sass广泛使用于国外，less在国内受众最多。stylus是后起之秀。

3，sass和less语法较为严谨、严密，而Stylus语法相对散漫，其中less学习起来更快一些，因为他更像CSS的标准；

4，sass和less相互影响较大，其中sass受less影响，已经进化到了全面兼容CSS的SCSS；

5，sass和less都有第三方工具提供转译，特别是sass和Compass是绝配；