[Programming/HTML|CSS] Sass (SCSS) 스타일시트 엔진

Sass & SCSS 란 무엇인가?

CSS 전처리기 (CSS pre-processor)라 불리는 Sass(Syntactically Awesome StyleSheet)는 CSS의 단점을 보완한 CSS의 확장형이다.

CSS 전처리기 종류에는 대표적으로 Sass(SCSS), Less, Stylus 등이 있다.

Sass는 2006년부터 시작하여 가장 오래된 CSS 확장 언어이다. 그 만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌륭하다. 

SCSS는 Sass의 3버전에서 새롭게 등장하였다. SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위 집합(Superset)이다. 한마디로 SCSS는 Sass를 더 편리하고 CSS답게 수정한 버전이다.

이러한 CSS 전처리기가 나온 이유는 WEB 개발 작업이 고도화되고 규모가 커질수록 CSS의 한계가 보이기 때문이다. 불필요한 선택자의 과용, 연산 기능의 한계, 구문의 부재 등 이러한 것들로 인하여 CSS 전처리기가 탄생한 것이다.

즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다.

Sass와 SCSS의 차이점

가장 큰 차이점이라면 { } (중괄호)와 ; (세미콜론)의 유무이다. 다음의 예제를 살펴보자.

/* Sass 문법 */

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px


/* Mixin 선언 */
=border-radius($radius)
  border-radius: $radius
  
  
.box
  /* Mixin 호출 */
  +border-radius(10px)

/* SCSS 문법 */

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}


/* Mixin 선언 */
@mixin border-radius($radius) {
  border-radius: $radius;
}


.box {
  /* Mixin 호출 */
  @include border-radius(10px);
}

Sass는 선택자의 유효범위를 '들여쓰기'로 구분하고, SCSS는 { } (중괄호)로 범위를 구분한다. 또한 Mixins를 정의하고 호출할 때 Sass는 '=' 와 '+' 기호를 사용하고, SCSS는 '@mixin' 과 '@include' 키워드를 사용한다.

한눈에 봐도 SCSS가 훨씬 CSS답다. 허나 간결한 문법을 좋아하는 사람도 있으니 기호에 맞게 선택하면 되겠다.

---

컴파일 방법

Sass(SCSS)는 웹에서 직접적으로 동작할 수 없다. 다시 말해 브라우저에서 SASS구문을 이해하지 못하므로 사전에 컴파일하는 작업이 필요하다. 컴파일 작업을 하기 위해서는 Sass 환경 설치가 필요하다.

다양한 방법으로 컴파일이 가능하지만 자바스크립트 개발 환경(Node.js)에서 추천하는 몇가지 방법과 다른 방법에 대해 알아보자.

SassMeister

간단한 Sass(SCSS) 코드는 컴파일러를 설치하는 것이 부담이 될 수 있다. 이럴 경우 아래의 온라인 Sass(SCSS) 컴파일러를 사용하면 된다.

www.sassmeister.com/

SassMeister | The Sass Playground!

온라인 Less 컴파일러처럼 Sass(SCSS) 문법을 코딩하면 CSS로 실시간 변환된다.

---

node-sass

node-sass는 Node.js를 컴파일러인 LibSass에 바인딩한 라이브러리이다.

다음의 명령을 입력하여 전역으로 Sass 컴파일러를 설치할 수 있다. 

$ npm install -g node-sass

만약 설치 시 에러를 만나게된다면 다음의 사이트에서 그 해결법을 찾을 수 있다.

github.com/sass/node-sass/blob/master/TROUBLESHOOTING.md#installing-node-sass-4x-with-node--4

sass/node-sass

ex) npm install --unsafe-perm -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

자세한 옵션은 아래의 사이트에서 확인할 수 있다.

github.com/sass/node-sass#command-line-interface

sass/node-sass

---

Gulp

gulpjs.com/

gulp.js

빌드 자동화 도구(JavaScript Task Runner)인 Gulp에서는 gulpfile.js를 만들어 아래와 같이 설정할 수 있다.

gulp 명령을 사용하기 위해서는 전역 설치가 필요하다.

$ npm install -g gulp

Gulp와 함께 Sass 컴파일러인 gulp-sass를 개발 의존성 모드로 설치한다. gulp-sass는 위에서 살펴본 node-sass를 Gulp에서 사용할 수 있도록 만들어진 플러그인이다.

$ 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() {
  // 입력 경로와 파일 변경 감지 시 실행할 actions(task name)
  gulp.watch('./src/scss/*.scss', ['sass']);
});

환경을 설정했으면 컴파일한다.

$ gulp sass

런타임 중 파일 감시 모드로 실행할 수도 있다.

$ gulp sass:watch

---

Webpack

JavaScript 모듈화 도구인 Webpack의 설정은 아래의 사이트에서 참고하면 된다.

webpack.js.org/

webpack

---

Parcel

웹 애플리케이션 번들러 Parcel은 정말 단순하게 컴파일할 수 있다.

parceljs.org/

Parcel

Parcel을 전역으로 설치한다.

$ npm install -g parcel-bundler

프로젝트에 Sass 컴파일러 (node-sass)를 설치한다.

$ npm install --save-dev node-sass

HTML에 <link>로 Sass 파일을 연결하면 끝이다.

<link rel="stylesheet" href="scss/main.scss">

$ parcel index.html

// 혹은

$ parcel build index.html

dist/ 에서 컴파일된 Sass 파일을 볼 수 있고, 별도의 포트 번호를 설정하지 않았다면 http://localhost:1234 에 접속하여 적용 상태를 확인할 수 있다.

---

온라인 Sass(SCSS) 컴파일러

복잡한 셋팅으로 컴파일하는 것이 아닌 간단하게 컴파일을 하고 싶다면 온라인 Sass(SCSS) 컴파일러를 사용하면 된다.

www.sassmeister.com/

SassMeister | The Sass Playground!

Sass(SCSS) 온라인 컴파일러

왼쪽에 SCSS 코드를 적으면 곧바로 오른쪽에 CSS로 변환된 코드가 나타난다. 이렇게 간단하게 사용할것이면 이것을 이용해도 될 것이다.

---

VSCode Extensions로 컴파일 (Live Sass Compiler)

VSCode 익스텐션 중 "Live Sass Compiler" 라는 익스텐션이 있다. 이것을 이용하면 쉽게 Sass(SCSS) 코드를 컴파일할 수 있다.

github.com/glenn2223/vscode-live-sass-compiler

glenn2223/vscode-live-sass-compiler

Sass(SCSS) 파일을 생성하여 코드를 적고 저장하면 실시간으로 CSS 코드로 변환해준다. 현재 사용중인데 참 편리하다.

---

Sass (SCSS) 의 자세한 문법, 유용한 설명 등은 아래의 사이트로 가면 볼 수 있다. 한글화가 잘 되어 있어서 편하게 볼 수 있을 것이다.

Sass(SCSS) 한글화 가이드 사이트

sass-guidelin.es/ko/

Sass Guidelines — Korean translation

---

공식 홈페이지

sass-lang.com/

Sass: Syntactically Awesome Style Sheets

공식 홈페이지 - 도큐먼트

sass-lang.com/documentation

Sass: Documentation