美文网首页Node.js
[Node.js] 使用gulp-ruby-sass

[Node.js] 使用gulp-ruby-sass

作者: 何幻 | 来源:发表于2016-03-06 10:40 被阅读577次

    (1)目录结构

    app/styles/src
        index.scss
    app/styles/dist
        index.css
    

    (2)package.json

    {
      "devDependencies": {
        "gulp": "^3.9.0",
        "gulp-ruby-sass": "^1.0.5"
      }
    }
    

    命令行:cnpm install

    (3)Gulpfile.js

    var gulp = require('gulp');
    var sass = require('gulp-ruby-sass');
    
    gulp.task('sass', function () {
        return sass('app/styles/src')
            .pipe(gulp.dest('app/styles/dist'));
    });
    
    gulp.task('default',['sass']);
    

    命令行:gulp

    注:
    (1)SASS与SCSS文件的语法是不同的,
    SASS使用缩进,省略分号,
    SCSS是CSS的超集。

    (2)sass,支持第二个参数用来控制压缩后的结果,

    sass('app/styles/src',{style:'expanded'})
    

    style有以下4种选择:
    nested:嵌套缩进,它是默认值
    expanded:每个属性占一行
    compact:每条样式占一行
    compressed:整个压缩成一行

    相关文章

      网友评论

        本文标题:[Node.js] 使用gulp-ruby-sass

        本文链接:https://www.haomeiwen.com/subject/yhynkttx.html