無論是 node-sass 還是 ruby-sass 使用 npm 安裝都非常的慢，甚至會裝不上。及其不利於團隊協作。建議使用 less 作為 css 預處理器。 如果因為 less 不支持自定義函數選擇用 sass 可以使用 less-plugin-functions 讓 less 支持自定義函數。

gulp-sass

本章使用的是 ruby-sass 如果你不方便安裝 ruby 或編譯速度慢，建議使用 gulp-sass

請務必理解如下章節後閱讀此章節：

1. 安裝 Node 和 gulp
2. 使用 gulp 壓縮 JS

Sass 是一種 CSS 的開發工具，提供了許多便利的寫法，大大節省了開發者的時間，使得 CSS 的開發，變得簡單和可維護。

本章使用 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 啟動此任務
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 代碼和編譯後的 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;
}

接著閱讀：使用 gulp 開發一個項目

使用 gulp 編譯 Sass