> Sass 是一種 CSS 的開發工具,提供了許多便利的寫法,大大節省了開發者的時間,使得 CSS 的開發,變得簡單和可維護。
本章使用?`ruby-sass`?編譯 css,若你沒有安裝 ruby 和 sass 請移步?[使用ruby.taobao安裝 Sass](https://github.com/nimojs/blog/issues/14)
## [](https://github.com/nimojs/gulp-book/blob/master/chapter6.md#安裝)安裝
~~~
npm install gulp-ruby-sass
~~~
## [](https://github.com/nimojs/gulp-book/blob/master/chapter6.md#基本用法)基本用法
你可以?[下載所有示例代碼](https://github.com/nimojs/gulp-book/archive/master.zip)?或?[在線查看代碼](https://github.com/nimojs/gulp-book/tree/master/demo/chapter6)
~~~
// 獲取 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'])
~~~
## [](https://github.com/nimojs/gulp-book/blob/master/chapter6.md#sass-代碼和編譯后的-css-代碼)Sass 代碼和編譯后的 CSS 代碼
[sass/a.scss](https://github.com/nimojs/gulp-book/tree/master/demo/chapter6/sass/a.scss)
~~~
.sass{
a{
color:pink;
}
}
~~~
[sass/import.scss](https://github.com/nimojs/gulp-book/tree/master/demo/chapter6/sass/import.scss)
~~~
@import "a.scss";
.import{
a{
color:red;
}
}
~~~
[sass/a.css](https://github.com/nimojs/gulp-book/tree/master/demo/chapter6/dist/css/a.css)
~~~
.sass a {
color: pink;
}
~~~
[sass/import.css](https://github.com/nimojs/gulp-book/tree/master/demo/chapter6/dist/css/import.css)
~~~
.sass a {
color: pink;
}
.import a{
color: red;
}
~~~