首页 > 其他 > 详细

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

时间:2016-09-28 19:10:10      阅读:1460      评论:0      收藏:0      [点我收藏+]

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设置不同样式风格的输出方法

原文:http://www.cnblogs.com/jiaoshou/p/5917361.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!