使用 gulp 編譯 Sass

Sass 是一種 CSS 的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了開發(fā)者的時(shí)間，使得 CSS 的開發(fā)，變得簡單和可維護(hù)。

本章使用 ruby-sass 編譯 css,若你沒有安裝 ruby 和 sass 請移步 使用ruby.taobao安裝 Sass

安裝

npm install gulp-ruby-sass

基本用法

你可以 下載所有示例代碼 或 在線查看代碼

// 獲取 gulp
var gulp = require('gulp')
// 獲取 gulp-ruby-sass 模塊
var sass = require('gulp-ruby-sass')

// 編譯sass
// 在命令行輸入 gulp sass 啟動此任務(wù)
gulp.task('sass', function() {
    return sass('sass/') 
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('dist/css'))
});

// 在命令行使用 gulp auto 啟動此任務(wù)
gulp.task('auto', function () {
    // 監(jiān)聽文件修改，當(dāng)文件被修改則執(zhí)行 images 任務(wù)
    gulp.watch('sass/**/*.scss', ['sass'])
});

// 使用 gulp.task('default') 定義默認(rèn)任務(wù)
// 在命令行使用 gulp 啟動 sass 任務(wù)和 auto 任務(wù)
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;
}