1. Dart-Sass란?
Dart-Sass는 Sass의 공식 구현체 중 하나로서, 더욱 빠르고 안정적이며 기능이 향상되었습니다. 이전에 Sass는 Ruby 기반으로 작동하였지만, Dart-Sass는 Dart 언어로 작성되어 Node.js나 웹 브라우저에서 사용할 수 있습니다.
Dart 언어는?
Google에서 개발한 객체 지향 프로그래밍 언어입니다.
2011년 처음 발표되었으며, 클라이언트 사이드 웹 개발부터 서버 사이드 애플리케이션, 모바일 애플리케이션까지 다양한 분야에서 사용됩니다.Dart는 자바나 C#과 유사한 문법을 가지고 있으며, JIT(Just-In-Time) 컴파일러와 AOT(Ahead-Of-Time) 컴파일러를 모두 지원하여 실행 속도를 높일 수 있습니다. 또한, 비동기적인 프로그래밍이 강점이며, Future, Stream 등의 기능을 제공합니다. 이러한 특징들로 Dart는 AngularDart, Flutter 등의 웹 및 모바일 애플리케이션 개발 프레임워크에서 많이 사용되고 있습니다.
즉, Dart-Sass는 Dart언어로 되어 있는 Sass 컴파일러입니다.
2. Sass 와 Dart-Sass의 관계
Sass 3.10 버전에서 @use가 처음 도입되었습니다. 그리고 이후 Sass 3.5 버전부터는 이전 버전의 Ruby-Sass 대신에 Dart-Sass가 공식적으로 릴리즈되었습니다. 따라서, Sass 3.10 버전부터는 기본적으로 @use를 지원하는 Dart-Sass가 기본 엔진으로 사용됩니다.
1) 언어와 라이브러리의 차이
a. 언어와 라이브러리:
Sass는 Ruby로 작성된 라이브러리이며, Ruby 환경에서 실행됩니다. 반면 Dart Sass는 Dart 언어로 작성된 프로그램이며, Node.js나 웹 브라우저 등 다양한 환경에서 실행됩니다.
b. 컴파일 속도:
Dart-Sass는 Sass에 비해 빠르게 컴파일됩니다. 이는 Sass가 Ruby로 작성된 라이브러리로 동작하기 때문에 발생하는 오버헤드를 줄이고, 최적화된 알고리즘을 사용하기 때문입니다.
c. 문법:
Dart-Sass는 Sass의 모든 버전을 지원하며, 추가적인 문법 기능을 제공합니다. 예를 들어, Dart-Sass는 'CSS Modules', 'CSS Grid' 등의 최신 CSS 기능을 지원합니다.
d. 오류 메시지:
Dart-Sass는 더욱 자세하고 의미있는 오류 메시지를 제공합니다. 이는 Sass에서 발생한 문제를 식별하고 해결하는 데 도움이 됩니다.
e. 지속적인 업데이트:
Sass는 Ruby로 작성된 라이브러리이므로, Ruby의 업데이트와 관련하여 버전 충돌이 발생할 수 있습니다. 반면, Dart-Sass는 자체 업데이트 기능을 갖추고 있으며, Sass의 최신 기능을 지속적으로 지원합니다.
2) 예시
a. @use의 사용
// Sass
<style>
$primary-color: #3bbfce;
$secondary-color: #2f3e46;
.navbar {
background-color: $primary-color;
a {
color: $secondary-color;
&:hover {
color: $primary-color;
}
}
}
</style>// Dart-Sass
<style>
// variables.scss
$primary-color: #3bbfce;
$secondary-color: #2f3e46;
// test.scss
@use 'variables';
.navbar {
background-color: variables.$primary-color;
a {
color: variables.$secondary-color;
&:hover {
color: variables.$primary-color;
}
}
}
</style>3. Dart-Sass를 사용해야 되는 이유
1) 더 높은 버전의 Sass 구문을 지원합니다.
Dart-Sass는 최신 버전의 Sass 구문과 기능을 지원하므로 개발자는 최신 Sass 기능을 사용하여 스타일링을 더욱 효율적으로 작성할 수 있습니다.
2) 더 나은 오류 메시지를 제공합니다.
Dart-Sass는 더욱 자세하고 유용한 오류 메시지를 제공합니다. 이는 Sass 스타일링에서 문제가 발생했을 때 개발자가 쉽게 문제를 파악하고 해결할 수 있도록 도와줍니다.
3) 빠른 처리 속도를 보장합니다.
Dart-Sass는 Just-In-Time(JIT) 컴파일러를 사용하여 CSS 컴파일 속도를 향상시켰습니다. 따라서 대규모 프로젝트에서도 빠르게 Sass를 처리할 수 있습니다.
4) 더 많은 기능을 제공합니다.
Dart-Sass는 기존 Sass와 달리, @use를 사용하여 모듈을 가져오는 기능을 제공하므로 Sass의 재사용성이 높아졌습니다. 또한, 추가 기능을 제공하는 Sass 확장 라이브러리를 더 쉽게 사용할 수 있습니다.
4. Dart-Sass 세팅하기
1. 신규 작업 시
a. npm 패키지 설치
기본 설치항목
- node.js : Dart언어는 node.js 기반 언어이므로 필요하다.
sassorgulp-sass: sass 기반 언어이므로 sass가 필요하며, 본인이 사용하는 컴파일러에 따라 gulp-sass를 설치하여 사용하여도 좋다.
(개인 취향으로 gulp-dart-sass 를 설치하여 사용하여 된다)- fibers : Fibers는 JavaScript에서의 동시성 문제를 해결하기 위한 라이브러리입니다. Fibers를 설치하면 Dart Sass와 Gulp의 성능을 최적화할 수 있습니다.
이 외에도 본인이 필요한 패키지를 설치하여 사용하면 좋다.
+) 제 경우는 gulp-sourcemaps, autoprefix를 추가하여 사용합니다.
b. gulpfile.js 세팅 (gulp-dart-sass 사용)
gulp-dart-sass를 사용한 이유 : gulp-sass와 gulp-dart-sass 모두 Sass를 컴파일하기 위한 Gulp 플러그인입니다. 그러나 gulp-sass는 node-sass를 사용하여 컴파일하고, gulp-dart-sass는 dart-sass를 사용하여 컴파일합니다.
gulp-dart-sass는 더욱 최신 버전의 Sass 기능을 지원하고, node-sass보다 더 빠르게 동작합니다. dart-sass는 오래된 node-sass에 대한 호환성 문제를 피하고, Sass 개발자들이 더 적극적으로 개발할 수 있도록 도와주고 있습니다. 따라서 gulp-dart-sass를 사용하는 것이 더욱 추천됩니다.
<script>
// gulp 패키지를 가져옵니다.
const gulp = require('gulp');
// gulp-dart-sass 패키지를 가져옵니다.
const sass = require('gulp-dart-sass');
// gulp-sourcemaps 패키지를 가져옵니다.
const sourcemaps = require('gulp-sourcemaps');
// sass.compiler에 sass 모듈을 설정합니다.
sass.compiler = require('sass');
// 'cdw' 라는 이름의 gulp task를 만듭니다.
gulp.task('cdw', function () {
// './sass/**/*.scss' 경로에서 scss 파일을 가져옵니다.
return gulp.src('./sass/**/*.scss')
// sourcemaps를 초기화합니다.
.pipe(sourcemaps.init())
// sass를 css로 컴파일합니다.
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
// sourcemaps를 작성합니다.
.pipe(sourcemaps.write())
// './css' 경로에 css 파일을 작성합니다.
.pipe(gulp.dest('./css'));
});
// 'watch' 라는 이름의 gulp task를 만듭니다.
gulp.task('watch', function () {
// './sass/**/*.scss' 경로에서 scss 파일을 감시합니다.
gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});
// 'default' 라는 이름의 gulp task를 만듭니다.
gulp.task('default', gulp.series('sass', 'watch')); </script>2. 기존 작업 변경 시
a. 해당 작업물이 Dart-Sass로 되어있는지 코드로 확인하기(gulp-sass 이용)
gulp-sass 버전 확인하기:
gulp-sass의 버전을 확인하여, ^4.0.0 또는 ^5.0.0 이상 버전인 경우 node-sass 대신 dart-sass를 사용할 가능성이 있습니다. gulp-sass의 package.json 파일에서 "dependencies" 또는 "devDependencies" 부분에서 버전을 확인할 수 있습니다.
gulpfile.js 설정 확인하기:
gulpfile.js 파일에서 gulp-sass를 설정하는 부분을 확인하여, gulpSass() 함수를 호출할 때 sourcemap, indentedSyntax, precision, errLogToConsole, outputStyle과 같은 옵션을 설정하고 있는지 확인해야 합니다. 이러한 옵션들은 node-sass와 dart-sass에서 서로 다른 이름을 가지고 있거나, 지원하지 않을 수 있습니다. dart-sass는 sourcemap 대신 sourceMap을 사용하며, indentedSyntax 대신 .sass 파일의 확장자를 사용합니다.
gulp-sass를 업그레이드 하기:
gulp-sass의 최신 버전에서는 dart-sass를 자동으로 지원하므로, gulp-sass를 최신 버전으로 업그레이드하면 node-sass와 dart-sass를 모두 사용할 수 있습니다. 하지만, gulp-sass의 옵션이나 설정은 node-sass와 dart-sass에서 다르게 동작할 수 있으므로, 이를 염두에 두어야 합니다.
b. Sass를 Dart-sass로 변경하기 위한 방법
node-sass 제거 및 sass or gulp-sass(gulp-dart-sass) 설치
npm install uninstall node-sass && npm install sass gulp-sassgulpfile.js 수정
위의 신규 코드와 동일합니다.
다음 시간에는 기존 Sass를 Dart-Sass로 변경시의 문제점을 파악하며 Dart-Sass에서 새롭게 등장한 구문 중 많이 쓰이는 것을 소개하도록 하겠습니다:)
