我先解释一下各自含义：
data: ----获取数据类型名称
image/gif-----指数据类型名称
base64 -----指编码模式
AAAAA ------指编码以后的结果。
background-image: url(data:image/gifbase64,AAAA)这句话的意思总体就是“获取数据类型是image gif文件，编码采用ASCII 字符，ASCII编码内容是‘AAAA’”
我知道你清楚没。这实际就是一种新写法。原理和以往不同。
以往的图片路径写法是：
background-img:url(../image/xxx.gif)
图片需要加载服务器指定路径下的对应gif文件。
新写法就是：
background-image: url(data:image/gifbase64,AAAA)
图片本身就已经以ASCII的形式存在了文档中，只需要浏览器进行编译就可以了。
新写法将图片写入文档中，可以减少客户端对服务器的请求。
换句话讲，原来我们要加载图片，是从服务器下载。
现在浏览器直接把那一串ASCII按照你的文件类型进行编译就可以出来结果了。
但是也会有问题
ie8貌似不兼容。
具体LZ可以再研究研究
基本语法区别:在使用 CSS 预处理器之前最重要的是理解语法，幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。
首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此如果可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。
/* style.scss or style.less */h1 {color: #0982C1}12341234
这是一个再普通不过的，不过 Sass 同时也支持老的语法，就是不包含花括号和分号的方式：
/* style.sass */h1color: #0982c1123123
而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名，下面是 Stylus 支持的语法：
/* style.styl */h1 {color: #0982C1}/* omit brackets */h1color: #0982C1/* omit colons and semi-colons */h1color #0982C1123456789101112123456789101112
可以在同一个样式单中使用不同的变量，例如下面的写法也不会报错：
h1 {color #0982c1}h2font-size: 1.2em1234512345
1、koala软件编译2、sass命令：依靠环境。
自动编译命令：（编译单个文件/编译整个文件夹）
编译单个文件
sass文件目录 sass --watch scss文件的路径:css文件的路径 --style expanded
编译整个文件夹
sass文件目录 sass --watch scss文件夹/. : css文件夹/. --style expanded
3、gulp编译
4、hbulid编译
① 工具--预编译设置
② 新建一个预编译配置 .scss
③ 输入触发命令的地址：ruby里面的sass.bat地址
④ 命令参数：%FileName% ../css/%FileBaseName%.css
