sass编译

或许你会说，我一直讨厌使用命令来做事情，我喜欢那种能看得到的界面操作。那么你可以考虑使用 GUI 界面工具来对 Sass 进行编译。当然不同的 GUI 工具操作方法略有不同。如果在此也一一对编译的界面工具做详细的介绍。我们可能需要写一本书来介绍这些编译工具的操作了。所以我们这里做一下简单介绍，对于 GUI 界面编译工具，目前较为流行的主要有：

1. Koala (http://koala-app.com/)
2. Compass.app（http://compass.kkbox.com/）
3. Scout（http://mhs.github.io/scout-app/）
4. CodeKit（https://incident57.com/codekit/index.html）
5. Prepros（https://prepros.io/）

相比之下，我比较推荐使用以下两个：

• Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) 
• CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

喜欢自动化研究的同学，应该都知道 Grunt 和 Gulp 这两个东东。如果您正在使用其中的任何一种，那么你也可以通过他们来配置 Sass 的编译。这里仅列出两个示例代码（具体情况要根据您的项目环境来做一定的修改，不建议生搬硬套，容易发生命案，呵呵。

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 同学请单击这里学习《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‘]);