Node-Sass or Dart-Sass : The CSS Preprocessor Dilemma (한글)

이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다.

 

원문: Node-Sass or Dart-Sass : The CSS Preprocessor Dilemma

저작권 정보: 원문 작성자인 Ali Bahraminezhad에게 번역을 허락받았습니다.

---

1년 좀 더 전에, 스택오버플로우에서 Vue CLI에 Node-Sass를 사용할지, Dart-Sass를 사용할지에 대한 질문에 답변을 한 적이 있습니다. 많은 추천을 받았기에, 이 주제에 대해 좀 더 깊이 생각해볼 가치가 있다고 생각했습니다.

개요

이 글은 Sass와 Sass의 전처리기 구현체, Dart-Sass와 Node-Sass에 관한 글입니다.

 

그럼, CSS 전처리기란 무엇일까요?

CSS 전처리기는 전처리기 자신만의 특별한 syntax을 가지고 CSS를 생성하도록 하는 프로그램입니다. 선택할 수 있는 많은 CSS 전처리기가 있습니다. 대부분의 CSS 전처리기는 pure CSS에 존재하지 않는 특징을 추가할 것입니다, 믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(ingeritance selector), 기타 등등. 이러한 특징은 CSS 구조를 가독성 있고 더 유지보수 하기 좋게 합니다.

MDN Web Docs

 

Sass는 스타일시트 언어입니다. 즉, 단지 구문과 정의일 뿐입니다. Dart-Sass와 Node-Sass[1]는 구현체입니다. Sass 홈페이지에 따르면, Dart-Sass는 Sass의 주요 구현체입니다.

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It’s fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.

 

위 단락을 읽으면, 당신은 Node-Sass보다 Dart-Sass를 선택할지도 모릅니다. 그게 맞아 보이니까요. 이제 몇 가지 핵심 포인트를 고려해봅시다.

 

1. 주요 구현체 ✔
2. 최신 기능 지원 ✔
3. 순수 자바스크립트로 컴파일?
4. JS로 컴파일하여 통합이 간편함 ✔

3번을 제외하면 다 좋아 보입니다. Dart-Sass는 가장 빠릅니다. 하지만 그것의 NPM 패키지는 JS로 컴파일된 버전으로, dart-one만큼 빠르지 않습니다.

 

Node-Sass는 어떨까요? Node-Sass는 LibSass(Sass의 C 구현 버전)를 감싼 포장(wrapper)일 뿐입니다.

 

우리가 (적어도 이론적으로) 알고 있는 내용을 요약해봅시다.

 

• Node-Sass: LibSass이기 때문에 빠름
• Dart-Sass (JS로 컴파일된 버전): Node-Sass만큼 빠르지 않음
• Dart-Sass (Dart VM에서 실행되는 버전): 가장 빠름

---

위에서 우리가 이야기한 것들은 모두 이론적인 것입니다. 이제 몇 가지 벤치마킹을 해봅시다. 테스트는 Bootstrap 4 Sass 소스코드를 사용했습니다.

 

1. Dart Sass 테스트 (Dart VM에서 실행)

Ubuntu에 brew로 설치: brew install sass/sass/sass

time sass bs4/bootstrap.scss dist/bs4.css

소요 시간: 0.21s

---

2. Dart Sass 테스트 (순수 자바스크립트 버전)

dart-sass 패키지 설치: npm install --save-dev sass

.\node_modules\.bin\sass .\bs4\bootstrap.scss dist/bs4-js.css

소요 시간: 1.992s

---

3. Node-Sass 테스트

node-sass 패키지 설치: npm install --save-dev node-sass

.\node_modules\.bin\node-sass .\bs4\bootstrap.scss dist/bs4-ns.css

소요 시간: 0.605s

---

요약

테스트 시나리오를 보면, 성능면에서 Dart-Sass(Dart VM에서 실행)는 가장 빠르고, Node-Sass는 나쁘지 않으며, Dart-Sass(순수 자바스크립트 버전)는 형편없습니다.

 

서로 다른 Sass 구현체의 Bootstrap Sass 컴파일 결과

• 2초가 별로 커 보이지 않지만, Dart-Sass(JS)가 Dart-Sass(Dart VM)보다 9배 느리고, Node-Sass보다 3배 느리다는 것을 고려하세요.
• 저는 20개 이상의 테마가 있는 프로젝트가 있는데, node-sass로는 30초가 걸렸는데, Dart-Sass(JS)로 시도해보니 한 세기가 걸렸습니다!
• Dart-Sass(Dart VM)이 가장 빠르지만, 설치와 통합이 좀 까다롭습니다.

마지막 소감?

결국 어떤 구현체가 당신의 프로젝트에 가장 적합한가는 항상 당신이 결정하는 것이지만, 다음 사항을 참고하세요.

1. 규모가 작거나 일반적인 Sass 프로젝트에는 Dart-Sass(JS)가 적합하고, 이는 node-sass와 같은 외부 바인딩 종속성이 없어서 설치가 쉽습니다.
2. sass 파일을 컴파일하는데 시간이 걸리고, 당신이 사용하는 모든 기능을 node-sass가 지원한다면, node-sass를 사용하세요!
3. 당신의 컴퓨터에 Dart-Sass(Dart VM)를 설치하는데 문제가 없다면, Dart-Sass가 가장 좋은 선택지입니다.
4. node-sass가 deprecated 되었고, 더 이상 새로운 기능이 추가되지 않는 것도 고려하세요.

각주:

[1]: Node-Sass는 인기 있는 스타일시트 전처리기 Sass의 C 버전인 LibSass와 Node.js의 바인딩을 제공하는 라이브러리입니다.