Dart Sass 컴파일러로 Scss 컴파일하는 방법

SASS는 Syntactically Awesome Style Sheets의 약자로 CSS의 단점을 보완하기 위해 나온 CSS 전처리기다.

 

CSS에서 중복, 반복되는 부분 등 불편함을 해소하기 위해 만들어졌다.

SASS는 Sass와 SCSS가 있다. (이름이 비슷해서 헷갈리기 쉽다.)

 

sass파일 자체를 HTML과 연결하여 사용하는 것이 아니라,

sass를 통해 작성된 문서를 컴파일러를 통해 css파일로 컴파일 하여 html 문서에 링크한다.

 

따라서 컴파일러가 필요한 데 Ruby와 C++ 기반의 컴파일러가 기존에 많이 사용되었지만,

현재는 Dart 언어를 기반으로 한 Dart Sass를 권장하고 있다.

 

---

1. Dart 설치

 

먼저 Dart 언어를 설치해야 한다.

IDE는 상관이 없으나 본인 PC에 설치되어 있는 인텔리제이를 기준으로 진행하겠다.

 

먼저 인텔리제이의 플러그인 중에 Dart를 설치한다. (다른 IDE를 이용할 예정이라면 이 과정은 생략해도 될 듯하다.)

Flutter 또한 Dart기반이기 때문에 Flutter를 설치하면 자동으로 Dart도 설치가 된다.

이 부분은 IDE에서 Dart를 사용하기 위한 플러그인이고, 우리는 아직 Dart를 설치하지 않았다.

 

아래의 DartSDK 홈페이지에서 DartSDK를 설치해야 한다.

https://dart.dev/get-dart

Get the Dart SDK

패키지 매니저를 통해 설치해도 되고, 본인이 편한 방법으로 본인의 OS에 맞게 진행하면 된다.

여기서는 패키지 매니저를 사용하지 않고, https://dart.dev/get-dart/archive에서 
직접 Dart SDK 압축파일을 다운로드 하였다.

 

그리고 압축을 해제하면 dart-sdk 폴더가 나오는 데, 명령프롬프트에서 Dart를 실행할 수 있도록 

경로를 등록해줘야한다.

 

제어판 - > 시스템 속성 -> 환경 변수 -> 사용자 변수 Path -> 편집 -> 경로 추가

 

dart.exe 실행파일이 bin 폴더에 있기 때문에 bin 폴더의 경로를 추가해줘야 한다.

 

명령프롬프트(cmd) 에서 dart --version 을 입력해서 정상적으로 설치가 되었는지 확인할 수 있다.

---

2. 컴파일러 만들기

dartsass 디렉토리를 만든 후에 pubspec.yaml 파일을 생성한다.

파일 안에 다음과 같이 입력한다.

name: dartsass
dev_dependencies:
  sass: ^1.56.1

environment:
  sdk: '>=2.10.0 <3.0.0'

dart pub get 를 입력한다.

---

이번엔 compile-sass.dart 파일을 만든 뒤 아래와 같이 입력한다. 

import 'dart:io';
import 'package:sass/sass.dart' as sass;

void main(List<String> arguments) {
  var result = sass.compile(arguments[0]);
  new File(arguments[1]).writeAsStringSync(result);
}

---

3. 컴파일

 

테스트용으로 style.scss 파일을 생성한 뒤에 아래와 같이 입력을 해보았다.

 

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

그리고 명령프롬프트에서 dart compile-sass.dart style.scss style.css 를 입력하면

디렉토리 내에 css파일이 생성된 것을 확인할 수 있다.

---

같은 방법으로 style.sass 파일을 생성하고, 아래와 같이 입력한 뒤에 

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

아까와 같이 명령프롬프트에서 dart compile-sass.dart style.sass style.css 를 입력하면

디렉토리 내에 css파일이 생성되는 것을 확인할 수 있다.

 

scss와 sass는 약간 문법이 다른데 보다시피 괄호의 여부와 세미콜론의 여부가 다르다는 것을 알 수 있다.