sass最终输出的样式包括下面几种样式风格:
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
sass:
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
var gulp = require(‘gulp‘); var sass = require(‘gulp-sass‘); gulp.task(‘sass‘, function () { return gulp.src(‘./sass/**/*.scss‘) .pipe(sass({outputStyle: ‘nested‘}).on(‘error‘, sass.logError)) .pipe(gulp.dest(‘./css‘)); });
编译出来的css样式风格默认为嵌套输出:
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
gulp.task(‘sass‘, function () { return gulp.src(‘./sass/**/*.scss‘) .pipe(sass({outputStyle: ‘expanded‘}).on(‘error‘, sass.logError)) .pipe(gulp.dest(‘./css‘)); });
输出样式风格为:
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
gulp.task(‘sass‘, function () { return gulp.src(‘./sass/**/*.scss‘) .pipe(sass({outputStyle: ‘compact‘}).on(‘error‘, sass.logError)) .pipe(gulp.dest(‘./css‘)); });
输出样式风格为:
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
gulp.task(‘sass‘, function () { return gulp.src(‘./sass/**/*.scss‘) .pipe(sass({outputStyle: ‘compressed‘}).on(‘error‘, sass.logError)) .pipe(gulp.dest(‘./css‘)); });
输出样式风格为:
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
原文:http://www.cnblogs.com/jiaoshou/p/5917361.html