• 使用 gulp 编译 Sass
    • gulp-sass
    • 安装
    • 基本用法
    • Sass 代码和编译后的 CSS 代码

    使用 gulp 编译 Sass

    无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢，甚至会装不上。及其不利于团队协作。建议使用 less 作为 css 预处理器。
    如果因为 less 不支持自定义函数选择用 sass 可以使用 less-plugin-functions 让 less 支持自定义函数。

    gulp-sass

    本章使用的是 ruby-sass 如果你不方便安装 ruby 或编译速度慢，建议使用 gulp-sass

    请务必理解如下章节后阅读此章节：

    1. 安装 Node 和 gulp
    2. 使用 gulp 压缩 JS

    访问论坛获取帮助

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

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

    安装

    1. npm install gulp-ruby-sass

    基本用法

    你可以 下载所有示例代码 或 在线查看代码

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

    访问论坛获取帮助

    接着阅读：使用 gulp 开发一个项目