本文只是簡單的簡紹。適用於剛剛開發ionic專案的同學學習瞭解

Sass的作用以及在本工程裡使用的細節，，需要gulpfile.js那些命令支援，以及編碼

Ionic框架使用了sass來定義自己的css機構，當然我們自定義的css檔案也使用sass。

因此涉及到sass編譯為css的步驟。當然實際上還需要多編譯後的css進行壓縮。以下為gulpfile.js裡關於sass編譯的程式碼：

gulp.task('sass', function(done) {
    gulp.src('./scss/ionic.app.scss')
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(gulp.dest('./www/css/'))
        .pipe(minifyCss({
            keepSpecialComments: 0
        }))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(gulp.dest('./www/css/'))
        .on('end', done);
});
 

注意其中gulp.src()可以指定多個目錄比如：

Gulp.src(‘./src/*.scss’,’src/**/*scss’)

編譯後的程式碼被放置到www的css資料夾

一般對於編寫scss程式碼以及除錯需要實時檢視css效果，因此一般還有一下程式碼：

gulp.task('watch', ['sass'], function() {
  gulp.watch(paths.sass, ['sass']);
});

分別執行 ，gulp sass 和gulp watch 或者使用gulpfile.js內部其他命令呼叫