喜歡自動化研究的同學(xué)，應(yīng)該都知道 Grunt 和 Gulp 這兩個東東。如果您正在使用其中的任何一種，那么你也可以通過他們來配置 Sass 的編譯。這里僅列出兩個示例代碼（具體情況要根據(jù)您的項目環(huán)境來做一定的修改，不建議生搬硬套，容易發(fā)生命案，呵呵。

1、Grunt 配置 Sass 編譯的示例代碼

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/style.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

想了解 Grunt 同學(xué)請單擊這里學(xué)習(xí)《Grunt-beginner前端自動化工具》。

2、Gulp 配置 Sass 編譯的示例代碼

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('default', ['sass','watch']);