gulp-sass设置不同样式风格的输出方法
sass最终输出的样式包括下面几种样式风格:
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
sass:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | nav { ul { margin : 0 ; padding : 0 ; list-style : none ; } li { display : inline- block ; } a { display : block ; padding : 6px 12px ; text-decoration : none ; } } |
设置为展开输出方式nested(默认输出):
1 2 3 4 5 6 7 8 | 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样式风格默认为嵌套输出:
1 2 3 4 5 6 7 8 9 10 | 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:
1 2 3 4 5 | gulp.task( 'sass' , function () { return gulp.src( './sass/**/*.scss' ) .pipe(sass({outputStyle: 'expanded' }).on( 'error' , sass.logError)) .pipe(gulp.dest( './css' )); }); |
输出样式风格为:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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:
1 2 3 4 5 | gulp.task( 'sass' , function () { return gulp.src( './sass/**/*.scss' ) .pipe(sass({outputStyle: 'compact' }).on( 'error' , sass.logError)) .pipe(gulp.dest( './css' )); }); |
输出样式风格为:
1 2 3 | 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:
1 2 3 4 5 | gulp.task( 'sass' , function () { return gulp.src( './sass/**/*.scss' ) .pipe(sass({outputStyle: 'compressed' }).on( 'error' , sass.logError)) .pipe(gulp.dest( './css' )); }); |
输出样式风格为:
1 | nav ul{ margin : 0 ; padding : 0 ; list-style : none }nav li{ display :inline- block }nav a{ display : block ; padding : 6px 12px ; text-decoration : none } |
原创作者:Jiao Shou
发布时间:2016年09月28日 - 14:45
最后更新:2016年09月28日 - 20:36
原始链接:http://www.cnblogs.com/jiaoshou/p/5917361.html
许可协议:转载本篇文章时请务必以超链接形式标明文章原文链接和作者信息。
扫描二维码,分享此文章
分类:
gulp
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具