Fork me on GitHub

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}

  

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

原创作者:Jiao Shou

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

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

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

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

扫描二维码,分享此文章

posted @   较瘦  阅读(3286)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· 开发者必知的日志记录最佳实践
· 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工具
知识点文章整理
点击右上角即可分享
微信分享提示