less&&sass

Sass和Less都属于CSS预处理器。
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。
转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。
Cass的安装需要安装Ruby环境，Less基于JavaScript。

一、LESS

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
作为CSS的扩展，Less不仅向后兼容CSS，而且它添加的额外功能使用现有的CSS语法。

1、变量

变量允许我们单独定义一系列通用的样式，然后需要的时候去调用，所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

2、混合

混合可以将一个定义好的classA轻松地引入到另一个classB中，从而简单实现classB继承classA中的所有属性。我们还可以带参数调用，就像使用函数一样。

3、嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度上减少了代码量，并且代码看起来更加的清晰。

4、函数&运算

运算提供了加减乘除操作，我们可以做属性值和颜色的运算，这样就可以实现属性之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果愿意的话可以操作属性值。

二、SASS

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

1、sass有变量和作用域。

• $variable，like php；
• #｛$variable｝like ruby；
• 变量有全局和局部之分，并且有优先级。

2、sass有函数的概念；

• @function和@return以及函数参数（还有不定参）可以让你像js开发那样封装你想要的逻辑。
• @mixin类似function但缺少像function的编程逻辑，更多的是提高css代码段的复用性和模块化，这个用的人也是最多的。
• ruby提供了非常丰富的内置原生api。

3、进程控制：

• 条件：@if @else；
• 循环遍历：@for @each @while
• 继承：@extend
• 引用：@import

4、数据结构：

• $list类型=数组；
• $map类型=object；
• 其余的也有string、number、function等类型