[Sass/SCSS] Sass(SCSS) 컴파일 방법


Sass(SCSS) 컴파일 방법



  • Sass(SCSS)는 웹에서 직접 동작할 수 없습니다.

  • 어디까지나 최종에는 표준 CSS로 동작해야 하며, 우리는 전처리기로 작성 후 CSS로 컴파일해야 합니다.

  • 다양한 방법으로 컴파일이 가능하지만 자바스크립트 개발 환경(Node.js)에서 추천하는 몇가지 방법을 소개합니다.



SassMeister

  • https://www.sassmeister.com

  • 간단한 Sass 코드는 컴파일러를 설치하는게 부담될 수 있습니다.

  • 그럴 경우 SassMeister를 사용할 수 있습니다.

  • 페이지 접속 후 바로 Sass나 SCSS 문법으로 코딩하면 CSS로 실시간 변환됩니다.

  • HTML를 작성하여 적용된 결과를 보거나 Sass 버전 설정 등 여러 환경 설정들을 지원하니 학습에 도움이 될 것입니다.



node-sass

  • https://github.com/sass/node-sass

  • https://sass-lang.com/libsass

  • npm이 설치되어있다고 생각하고 작성된 코드입니다.

  • node-sass는 Node.js를 컴파일러인 LibSass에 바인딩한 라이브러리 입니다. NPM으로 전역 설치하여 사용합니다.

$ npm install -g node-sass
  • 컴파일하려는 파일의 경로와 컴파일된 파일이 저장될 경로를 설정합니다. [ ] 는 선택사항입니다.

  • $ node-sass [옵션] <입력파일경로> [출력파일경로]

$ node-sass scss/main.scss public/main.css
  • 여러 출력 경로를 설정할 수 있습니다.
$ node-sass scss/main.scss public/main.css dist/style.css
  • 옵션을 적용할 수도 있습니다.
    옵션으로 –watch 혹은 -w를 입력하면, 런타임 중 파일을 감시하여 저장 시 자동으로 변경 사항을 컴파일합니다.
$ node-sass --watch scss/main.scss public/main.css
  • 기타 옵션

    • https://github.com/sass/node-sass#command-line-interface



Gulp

  • npm이 설치되어있다고 생각하고 작성된 코드입니다.

  • Gulp : https://gulpjs.com/

  • 빌드 자동화 도구(JavaScript Task Runner)인 Gulp에서는 gulpfile.js을 만들어 아래와 같이 설정할 수 있습니다. 먼저 gulp 명령을 사용하기 위해서는 전역 설치가 필요합니다.

$ npm install -g gulp  
  • Gulp와 함께 Sass 컴파일러인 gulp-sass를 개발 의존성(devDependency) 모드로 설치합니다. gulp-sass는 위에서 살펴본 node-sass를 Gulp에서 사용할 수 있도록 만들어진 플러그인입니다.

    • https://github.com/dlmanning/gulp-sass
$ npm install --save-dev gulp gulp-sass
  • 환경설정
// 자바스크립트
// gulpfile.js

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

// 일반 컴파일
gulp.task('sass', function () {
    return gulp.src('./src/scss/*.scss')  // 입력 경로  
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./dist/css'));  // 출력 경로
});

// 런타임 중 파일 감시
gulp.task('sass:watch', function () {
    gulp.watch('./src/scss/*.scss', ['sass']);  
    // 입력 경로와 파일 변경 감지 시 실행할 Actions(Task Name)
});
  • 컴파일
$ gulp sass
  • 런타임 중 파일 감시 모드로 실행할 수도 있습니다.
$ gulp sass:watch



Parcel

  • https://parceljs.org/

  • npm이 설치되어있다고 생각하고 작성된 코드입니다.

  • 우선 Parcel를 전역으로 설치합니다.

$ npm install -g parcel-bundler
  • 프로젝트에 Sass 컴파일러(node-sass)를 설치합니다.
$ npm install --save-dev node-sass
  • 이제 HTML에 로 Sass 파일만 연결하면 됩니다. 다른 설정은 필요하지 않습니다.
<link rel="stylesheet" href="scss/main.scss">
  • 컴파일
$ parcel index.html
# 혹은
$ parcel build index.html
  • dist/에서 컴파일된 Sass 파일을 볼 수 있고,
    별도의 포트 번호를 설정하지 않았다면 http://localhost:1234에 접속하여 적용 상태를 확인할 수 있습니다.



    본 포스팅은 HEROPY 님의 영상과 블로그를 보고 공부한 내용을 정리한 것입니다.
    https://heropy.blog/2018/01/31/sass/