使用 gulp 编译 Sass

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

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

    1. 安装 Node 和 gulp

    访问论坛获取帮助


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

    你可以 下载所有示例代码

    1. // 获取 gulp
    2. var gulp = require('gulp')
    3. // 获取 gulp-ruby-sass 模块
    4. var sass = require('gulp-ruby-sass')
    5. // 编译sass
    6. // 在命令行输入 gulp sass 启动此任务
    7. return sass('sass/')
    8. .on('error', function (err) {
    9. })
    10. .pipe(gulp.dest('dist/css'))
    11. });
    12. // 在命令行使用 gulp auto 启动此任务
    13. gulp.task('auto', function () {
    14. // 监听文件修改,当文件被修改则执行 images 任务
    15. gulp.watch('sass/**/*.scss', ['sass'])
    16. });
    17. // 使用 gulp.task('default') 定义默认任务
    18. gulp.task('default', ['sass', 'auto'])

    sass/a.scss

    1. @import "a.scss";
    2. .import{
    3. a{
    4. color:red;
    5. }
    6. }

    sass/import.css

    1. .sass a {
    2. color: pink;
    3. }
    4. .import a{