gulp-sass设置不同样式风格的输出方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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;
}
}

设置为展开输出方式nested(默认输出)：

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; }

设置为展开输出方式expanded：

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;
}

设置为展开输出方式compact：

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; }

设置为展开输出方式compressed：

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}

本文标题:gulp-sass设置不同样式风格的输出方法

原创作者:Jiao Shou

发布时间:2016年09月28日 - 14:45

最后更新:2016年09月28日 - 20:36

原始链接:http://www.cnblogs.com/jiaoshou/p/5917361.html

许可协议:转载本篇文章时请务必以超链接形式标明文章原文链接和作者信息。