Sass是对css的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。
1、Sass有两种扩展名 （1） .sass是一种sass新语法，跟css语法差别比较大，很难使用，跟stylus很像。 （2） .scss跟css语法很像，比较简单，是最流行的一套语法。
2、安装ruby 使用Sass需要先安装ruby，查看是否安装成功：ruby -v ruby安装成功，会提供一个gem指令，跟 node 中的 npm 一样，是一个包管理工具，用gem -v查看： 然后安装Sass：gem install sass 查看是否安装成功：sass -v 3、配置中文注释 Sass默认不支持中文注释，所以我们要配置它 打开 D:\Ruby24-x64\lib\ruby\gems\2.4.0\gems\sass-3.5.6\lib\sass 目录，编辑engine.rb 文件，在 55 行，添加如下这行代码： Encoding.default_external = Encoding.find('utf-8') 4、编译Sass
浏览器不认识sass，需要编译，有如下两种编译方式： （1）、命令行编译： 编译结果：
sass sass文件 css文件 ：将sass的编译结果，输出到css文件中 编译结果： sass sass文件 css文件 配置：-c 避免输出缓存 --sourcemap=none ：避免输出 sourcemap 文件 备注： 命令行编译可以快速的把sass文件编译成css文件，但是编译多个文件时成本较高，不适合投入生产。
（2）、工程化编译 —— gulp编译 首先将 gulp 及 gulp 的 sass 插件（gulp-ruby-sass）本地化： 在项目目录新建一个 node_modules 文件夹 —— 在命令提示符输入命令 npm link gulp 获取 gulp —— 继续输入命令 npm link gulp-ruby-sass 获取插件。 注意： sass这个插件有一个功能，可以用来获取文件，所以我们在使用它的时候，就不用再使用src方法获取文件了。参数就是文件的地址，返回值是文档流对象，可以使用 pipe 方法。
gulp编译实例： 新建一个HTML文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>gulp 编译</title> <link rel="stylesheet" type="text/css" href="dist/test.css" /> </head> <body> <div> <h1>sass文件</h1> </div> </body> </html>新建 test.scss文件：
div{ h1{ color: gold; background: skyblue; } }新建 gulpfile.js 文件：
//引入模块 var gulp = require('gulp'); var rubySass = require('gulp-ruby-sass'); //创建编译任务 gulp.task('sass',function(){ //编译sass //rubySass可以获取文件 rubySass('test.scss') //编译输出到dest/test.css .pipe(gulp.dest('dist')) }) //启动任务 gulp.task('default',['sass'])使用命令 gulp 运行：
运行后项目目录结构： 运行结果：
