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

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

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

安装

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

  1. // 获取 gulp
  2. var gulp = require('gulp')
  3. // 获取 gulp-ruby-sass 模块
  4. var sass = require('gulp-ruby-sass')
  5. // 编译sass
  6. // 在命令行输入 gulp sass 启动此任务
  7. gulp.task('sass', function() {
  8. return sass('sass/')
  9. .on('error', function (err) {
  10. console.error('Error!', err.message);
  11. })
  12. .pipe(gulp.dest('dist/css'))
  13. });
  14. // 在命令行使用 gulp auto 启动此任务
  15. gulp.task('auto', function () {
  16. // 监听文件修改,当文件被修改则执行 images 任务
  17. gulp.watch('sass/**/*.scss', ['sass'])
  18. });
  19. // 使用 gulp.task('default') 定义默认任务
  20. // 在命令行使用 gulp 启动 sass 任务和 auto 任务
  21. gulp.task('default', ['sass', 'auto'])

Sass 代码和编译后的 CSS 代码
sass/a.scss

  1. .sass{
  2. a{
  3. color:pink;
  4. }
  5. }

sass/import.scss

  1. @import "a.scss";
  2. .import{
  3. a{
  4. color:red;
  5. }
  6. }

sass/a.css

  1. .sass a {
  2. color: pink;
  3. }

sass/import.css

  1. .sass a {
  2. color: pink;
  3. }
  4. .import a{
  5. color: red;
  6. }

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

暂无相关推荐.