把写好的 sass 编译成 css ，可以使用 grunt-contrib-sass 这个插件 .. 打开命令行 ... 先去安装一下这个插件 ...

npm install grunt-contrib-sass --save-dev

除了这个插件，你的电脑上还需要安装 ruby 还有 sass ... 然后打开 Gruntfile.js ... 去加载一下安装的 sass 插件 ...

grunt.loadNpmTasks('grunt-contrib-sass');

这样我们就可以在项目里面使用 grunt sass 这个任务了。我们先在项目里添加一个 sass 文件 ... 在 stylesheets 这个目录的下面 ... 可以把这个 style.css 重命名为 scss ...

打开它，简单的修改一下这个文件里的东西 ... 先定义一个变量 ... 然后在这个样式里面，可以使用这个变量 ... 关于 sass ，你可以参考宁皓网的 sass 基础教程 ...

$base-color: #000;
body {
background-color: $base-color;
}

回到 Gruntfile.js ... 再去配置一下 sass 这个任务 .. 在这个 initConfig 里面定义的对象里 ... 添加一个跟任务同名的属性 ... 就是 sass ... 它的值是一个对象 ... 然后再去设置一下这个任务的目标 ... 比如我们添加一个叫做 dist 的目标 ... 表示 distribution ...

在这里，再添加一个 files 对象 ... 在这个对象里面，可以设置一下，把在哪里的 sass 文件，编译成 css ，然后放到哪里 ... 首先要指定一下编译后的目标 ... 比如我们要编译一下 stylesheets 这个目录下面的 style.scss ... 编译以后，放到 dist 这个目录下面的 stylesheets 里面，文件的名字是 style.css ...

这里添加这个编译之后的目标 ... 就是 'dist/stylesheets/style.css' ... 冒号 ... 再设置一下 sass 文件的位置 ... 'stylesheets/style.scss' ...

逗号分开 ... 可以继续去用这样的形式来指定其它的要编译的 sass ... 跟编译相关的选项，要放到一个 options 属性里面 ... 添加一个 options 属性 ... 值是一个对象 ... 这里我们设置一下编译之后的格式 ... 用一个 style 属性 ... 它的值，设置成 expanded ...

保存 ... 去执行一下这个任务 .. 回到命令行工具 .. 输入 grunt sass:dist ..

完成以后 ... 回到项目 ... 在 dist 这个目录的下面 ... 打开 stylesheets . .. 找到 style.css ... 这个文件就是编译之后的在项目根目录下面的 stylesheets 下面的 style.scss ...