gulp-sass

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

請(qǐng)務(wù)必理解如下章節(jié)后閱讀此章節(jié)：

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

訪問(wèn)論壇獲取幫助

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

本章使用 ruby-sass 編譯 css,若你沒(méi)有安裝 ruby 和 sass 請(qǐng)移步 使用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 啟動(dòng)此任務(wù)
gulp.task('sass', function() {
    return sass('sass/') 
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('dist/css'))
});

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

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

訪問(wèn)論壇獲取幫助