Sass 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使得 CSS 的开发，变得简单和可维护。
| npm install gulp-ruby-sass |
| // 获取 gulp |
| var 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{ |
| a{ |
| color:pink ; |
| } |
| } |
sass/import.scss
| @import "a.scss"; |
| .import{ |
| a{ |
| color:red ; |
| } |
| } |
| .sass a { |
| color: pink ; |
| } |
