CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

 下载资源：www.yinxiangit.com

通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性。

优点：    

 可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

SASS变量: sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

普通变量：定义之后可以在全局范围内使用。

默认变量：sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。默认变量的价值在进行组件化开发的时候会非常有用。

特殊变量：一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

多值变量 ：

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

1. list数据：

可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值

2.map数据：

以key和value成对出现，其中value又可以是list。可通过map-get($map,$key)取值

全局变量：

在变量值后面加上!global即为全局变量。目前变量机制 ：在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

sass的嵌套（Nesting）包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

优点：增强了sass文件的结构性和可读性。在选择器嵌套中，可以使用&表示父元素选择器

混合（Mixin）:

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

@content：

可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

继承：@extend，后面紧跟继承的选择器。

占位选择器%：

这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

SASS中的函数：

以@fuction开始。实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

条件判断以及循环：@if···@else···

for循环：

@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

@each循环：

SASS编译方法：自动化编译、 GUI编译、命令编译自动化编译是最简单常用的方法；但是有一个缺点：命令只能一次性编译。每次保存“.scss”文件之后，都得重新执行一次命令。所以编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：例如：sass  –watch   +要编译的文件路径   ： 编译好的文件路径