使用 gulp 编译 Sass-Gulp入门指南

当前位置:　首页>> 技术小册>> Gulp入门指南

Sass 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使得 CSS 的开发，变得简单和可维护。

本章使用 ruby-sass 编译 css,若你没有安装 ruby 和 sass 请移步 使用ruby.taobao安装 Sass

####安装
`npm install gulp-ruby-sass`
基本用法
你可以 下载所有示例代码 或 在线查看代码

```bash
// 获取 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;
}
```

该分类下的相关小册推荐：

暂无相关推荐.