使用 gulp 编译 Sass

无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢，甚至会装不上。及其不利于团队协作。建议使用 less 作为 css 预处理器。如果因为 less 不支持自定义函数选择用 sass 可以使用 less-plugin-functions 让 less 支持自定义函数。

gulp-sass

本章使用的是 ruby-sass 如果你不方便安装 ruby 或编译速度慢，建议使用 gulp-sass

请务必理解如下章节后阅读此章节：

安装 Node 和 gulp
使用 gulp 压缩 JS

访问论坛获取帮助

Sass 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使得 CSS 的开发，变得简单和可维护。

本章使用 ruby-sass 编译 css,若你没有安装 ruby 和 sass 请移步使用ruby.taobao安装 Sass

安装

npm install gulp-ruby-sass

基本用法

你可以下载所有示例代码或在线查看代码

// 获取 gulpvar gulp = require('gulp')// 获取 gulp-ruby-sass 模块var sass = require('gulp-ruby-sass')// 编译sass// 在命令行输入 gulp sass 启动此任务gulp.task('sass', function() {    return sass('sass/')     .on('error', function (err) {      console.error('Error!', err.message);   })    .pipe(gulp.dest('dist/css'))});// 在命令行使用 gulp auto 启动此任务gulp.task('auto', function () {    // 监听文件修改，当文件被修改则执行 images 任务    gulp.watch('sass/**/*.scss', ['sass'])});// 使用 gulp.task('default') 定义默认任务// 在命令行使用 gulp 启动 sass 任务和 auto 任务gulp.task('default', ['sass', 'auto'])

Sass 代码和编译后的 CSS 代码

sass/a.scss

.sass{    a{        color:pink;    }}

sass/import.scss

@import "a.scss";.import{    a{        color:red;    }}

sass/a.css

.sass a {  color: pink;}

sass/import.css

.sass a {  color: pink;}.import a{  color: red;}

访问论坛获取帮助

接着阅读：使用 gulp 开发一个项目

6. 使用 gulp 编译 Sass

使用 gulp 编译 Sass

gulp-sass

安装

基本用法

Sass 代码和编译后的 CSS 代码