(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
:整个压缩成一行
网友评论