웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
NodeJS 환경에서 sass 또는 scss를 css로 변환하여 사용하는 방법에 대하여 짧게 알아보겠습니다.
일반적인 상황에서는 필요하지 않습니다. 대부분 빌드 과정의 트랜스파일링 또는 번들링 과정에서 자동으로 변환되도록 설정 후 사용하기 때문이죠. 하지만 이런 과정이 없는 경우가 있을 수 있겠죠? 드물기는 하겠지만 수동으로 직접 빌드하거나 아니면 이미 작업된 css 전처리기를 사용한 파일의 코드를 css로 변환해야하는 상황이 필요할 수 있습니다.
그럼 아래에서 순서대로 알아봅니다.
하나. sass 모듈 설치하기
변환을 위해서는 기본적으로 sass 명령어를 사용해야 합니다. sass를 cli로 사용하기 위해서 node package를 global로 설치합니다.
설치가 완료되었으면 sass를 커맨드라인에 입력해봅니다. 아래와 같은 메시지가 나타나는지 확인해보세요.
둘. 커맨드 라인에 명령어 사용하기
설치가 끝났으면 변환 또는 css 코드를 확인하는 것은 간단합니다. 먼저 아래와 같이 몇 가지 옵션을 간략히 알아봅니다.
-w // 파일이 변경된 경우 자동으로 감지하여 변환하기
-c // terminal 또는 unicode에 색 사용하기
-h // 도움말 확인하기
위와 같은 옵션이 있습니다. watch의 경우 파일이 바뀔때마다 생성되는 파일이 자동으로 업데이트 되므로 매우 유용합니다.
간략한 예제를 알아봅니다. 먼저 예제 코드입니다.
파일명 : test.scss
@ 코드만 확인하기
css로 변경된 코드만 확인하는 방법입니다. scss 또는 sass 명령어와 파일명을 cli에 입력하면 됩니다.
변환된 결과를 확인해보면 정상적으로 변환된 것을 확인할 수 있습니다. 이번에는 새로운 파일 test2.css를 생성해봅니다.
@ 새로운 css 파일 생성하기
새로운 파일을 생성하는 방법은 간단합니다. 파일명 뒤에 새로운 파일명을 추가로 입력하면 됩니다.
이번에는 출력되지 않고 새로운 파일 test2.css가 생성되었습니다. 내용을 확인해봅니다.
생성된 파일을 보니 동일합니다. 다만 하단에 주석이 추가된 것을 알 수 있습니다.
여기까지 간략한 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/>
...
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;
}
}
$color2: blue;
div {
color: $color1;
span {
color: $color2;
}
}
@ 코드만 확인하기
css로 변경된 코드만 확인하는 방법입니다. scss 또는 sass 명령어와 파일명을 cli에 입력하면 됩니다.
> sass test.scss
// 출력결과
div {
color: red;
}
div span {
color: blue;
}
// 출력결과
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 */
div {
color: red;
}
div span {
color: blue;
}
/*# sourceMappingURL=test2.css.map */
생성된 파일을 보니 동일합니다. 다만 하단에 주석이 추가된 것을 알 수 있습니다.
여기까지 간략한 sass/scss 파일의 css 변환 방법을 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
