• Sass 설치
    • node-sass
    • gulp-sass

node-sass

컴파일 1회

$ npm install node-sass --global

폴더 내 파일 변화

$ node-sass sass/style.scss css/style.css

지속적 컴파일 관찰 명령어

$ node-sass -w sass/ -o css/

Sourcemap 설정

$ node-sass -w sass -o css --source-map css

CSS output style (nested | expanded | compact | compressed)

$ node-sass -w sass -o css --output-style expanded --source-map css
  • nested (여러줄 출력)
  • expanded (여러줄 출력)
  • compact (한줄 출력)
  • compressed (압축 출력)

gulp-sass

Install

$ npm install gulp-sass --save-dev

Basic Usage (gulpfile.js)

  'use strict';

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

  gulp.task('sass', function () {
    return gulp.src('sass/**/*.{sass,scss}')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'));
  });

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