第2章 Sassの利用環境を整えよう

2-5 Sassをコンパイルする

Sassをコンパイルする

#main {
    width: 600px;
    p {
        margin: 0 0 1em;
        em {
            color: #f00;
        }
    }
    small {
        font-size: small;
    }
}

gulp タスクを実行してSass をコンパイル

gulp sass

#main {
  width: 600px;
}
#main p {
  margin: 0 0 1em;
}
#main p em {
  color: #f00;
}
#main small {
  font-size: small;
}

gulp コマンドとgulpfile.js について

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

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

gulp.task('sass:watch', function() {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

【追記】gulp コマンドとgulpfile.js について

gulp v4からgulp.watch APIの引数が変更になり、本書のコードではsass:watchタスクがエラーになるため、ダウンロードデータのgulpfile.js内のsass:watchタスクのソースを一部変更してあります。（11行目）

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

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

// gulp v4 からこちらの書き方に変更されています。
gulp.task('sass:watch', function() {
  gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

Sass とCSS のディレクトリを指定する

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

アウトプットスタイルを指定する

.pipe(sass({outputStyle: 'expanded'}))

アウトプットスタイルの種類

.pipe(sass({outputStyle: 'nested'}))

#main {
  width: 600px; }
  #main p {
    margin: 0 0 1em; }
    #main p em {
      color: #f00; }
  #main small {
    font-size: small; }

.pipe(sass({outputStyle: 'expanded'}))

#main {
  width: 600px;
}
#main p {
  margin: 0 0 1em;
}
#main p em {
  color: #f00;
}
#main small {
  font-size: small;
  color: #00f;
}

.pipe(sass({outputStyle: 'compact'}))

#main { width: 600px; }

#main p { margin: 0 0 1em; }

#main p em { color: #f00; }

#main small { font-size: small; }

.pipe(sass({outputStyle: 'compressed}))

#main{width:600px}#main p{margin:0 0 1em}#main p em{color:#f00}#main small{font-size:small}

ファイルの更新を監視する

gulp.task('sass:watch', function() {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

gulp sass:watch