웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

전처리기 sass/scss css로 컴파일 변환하기

Last Modified : 2022-10-13 / Created : 2022-10-04
3,490
View Count
NodeJS 환경에서 sass 또는 scss를 css로 변환하여 사용하는 방법에 대하여 짧게 알아보겠습니다.




! 언제 변환이 필요할까?


일반적인 상황에서는 필요하지 않습니다. 대부분 빌드 과정의 트랜스파일링 또는 번들링 과정에서 자동으로 변환되도록 설정 후 사용하기 때문이죠. 하지만 이런 과정이 없는 경우가 있을 수 있겠죠? 드물기는 하겠지만 수동으로 직접 빌드하거나 아니면 이미 작업된 css 전처리기를 사용한 파일의 코드를 css로 변환해야하는 상황이 필요할 수 있습니다.

그럼 아래에서 순서대로 알아봅니다.

하나. sass 모듈 설치하기
변환을 위해서는 기본적으로 sass 명령어를 사용해야 합니다. sass를 cli로 사용하기 위해서 node package를 global로 설치합니다.
npm i -g sass

설치가 완료되었으면 sass를 커맨드라인에 입력해봅니다. 아래와 같은 메시지가 나타나는지 확인해보세요.
$ sass
Compile Sass to CSS.

Usage: sass <input.scss> [output.css]
sass <input.scss>:<output.css> <input/>:<output/> <dir/>
...


둘. 커맨드 라인에 명령어 사용하기
설치가 끝났으면 변환 또는 css 코드를 확인하는 것은 간단합니다. 먼저 아래와 같이 몇 가지 옵션을 간략히 알아봅니다.

-w // 파일이 변경된 경우 자동으로 감지하여 변환하기
-c // terminal 또는 unicode에 색 사용하기
-h // 도움말 확인하기

위와 같은 옵션이 있습니다. watch의 경우 파일이 바뀔때마다 생성되는 파일이 자동으로 업데이트 되므로 매우 유용합니다.


! sass 변환 예제 코드보기


간략한 예제를 알아봅니다. 먼저 예제 코드입니다.

파일명 : test.scss
$color1: red;
$color2: blue;

div {
  color: $color1;

  span {
    color: $color2;
  }
}

@ 코드만 확인하기
css로 변경된 코드만 확인하는 방법입니다. scss 또는 sass 명령어와 파일명을 cli에 입력하면 됩니다.
> sass test.scss

// 출력결과
div {
  color: red;
}
div span {
  color: blue;
}

변환된 결과를 확인해보면 정상적으로 변환된 것을 확인할 수 있습니다. 이번에는 새로운 파일 test2.css를 생성해봅니다.


@ 새로운 css 파일 생성하기
새로운 파일을 생성하는 방법은 간단합니다. 파일명 뒤에 새로운 파일명을 추가로 입력하면 됩니다.
> sass test.scss test2.css

이번에는 출력되지 않고 새로운 파일 test2.css가 생성되었습니다. 내용을 확인해봅니다.
> cat test2.css

div {
color: red;
}
div span {
color: blue;
}

/*# sourceMappingURL=test2.css.map */

생성된 파일을 보니 동일합니다. 다만 하단에 주석이 추가된 것을 알 수 있습니다.


여기까지 간략한 sass/scss 파일의 css 변환 방법을 알아보았습니다.

Previous

[nuxtjs] PostCSS 설치 및 사용하기

Previous

[CSS] css 속성 clip-path 배우기. 원, 타원, 다각형