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

許可協議:轉載本篇文章時請務必以超連接形式標明文章原文連接和做者信息。

掃描二維碼,分享此文章