Sassで最終的なCSSの出力形式を指定する

Sassのオプションで、最終的なCSSの出力形式を指定するoutputStyleの値を試してみます。

サンプルコード

今回はgulp-sassを使用しますが、Node Sassを使用した場合も同様になるようです。
gulpfile.jsを以下のように設定します。

gulpfile.js

var gulp          = require('gulp'),
    sass          = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./*.scss')
  .pipe(sass())
  .pipe(gulp.dest('./'));
});

オプションのoutputStyleは特に指定していない状態です。
Sassファイルは以下のように記述します。

.block {
    background-color: red;
    &__element {
        color: blue;
		@media screen and (min-width: 767px), print {
			color: blue;
		}
    }
}

この状態でコンパイルすると、Sassと同じネスト状態で出力されました。

.block {
  background-color: red; }
  .block__element {
    color: blue; }
    @media screen and (min-width: 767px), print {
      .block__element {
        color: blue; } }

次にoutputStyleの指定を試してみますが、outputStyleで設定できる値はnested、expanded、compact、compressedの4種類になります。

nestedを試してみます。
gulpfile.jsの6〜8行目を以下のように変更します。

gulpfile.js

var gulp          = require('gulp'),
    sass          = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./*.scss')
  .pipe(sass({
    outputStyle : 'nested'
  }))
  .pipe(gulp.dest('./'));
});

コンパイルを試してみると、最初と同じ状態になりました。

.block {
  background-color: red; }
  .block__element {
    color: blue; }
    @media screen and (min-width: 767px), print {
      .block__element {
        color: blue; } }

オプションでoutputStyleを設定していない場合の初期値はnestedになります。

次にexpandedです。

gulpfile.js

var gulp          = require('gulp'),
    sass          = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./*.scss')
  .pipe(sass({
    outputStyle : 'expanded'
  }))
  .pipe(gulp.dest('./'));
});

コンパイルすると、一般的によく見る展開された状態になりました。

.block {
  background-color: red;
}

.block__element {
  color: blue;
}

@media screen and (min-width: 767px), print {
  .block__element {
    color: blue;
  }
}

次にcompactです。

gulpfile.js

var gulp          = require('gulp'),
    sass          = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./*.scss')
  .pipe(sass({
    outputStyle : 'compact'
  }))
  .pipe(gulp.dest('./'));
});

コンパイルすると、セレクタ毎に1行に圧縮された状態になりました。

.block { background-color: red; }

.block__element { color: blue; }

@media screen and (min-width: 767px), print { .block__element { color: blue; } }

最後にcompressedです。

gulpfile.js

var gulp          = require('gulp'),
    sass          = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./*.scss')
  .pipe(sass({
    outputStyle : 'compressed'
  }))
  .pipe(gulp.dest('./'));
});

コンパイルすると、1行に圧縮された状態になりました。

.block{background-color:red}.block__element{color:blue}@media screen and (min-width: 767px), print{.block__element{color:blue}}

基本的にはSassで管理するのであればcompressedで圧縮したのでよさそうですが、それぞれ利点のある出力形式なので、案件の仕様などに合わせて使い分けるとよさそうです。