[SASS] SASS 컴파일하는 방법

sass

Sass는 CSS 전처리기로, Sass로 작성된 코드를 브라우저에서 바로 사용할 수 없습니다. 따라서 Sass 코드를 CSS로 컴파일하여 사용해야 합니다. 아래는 Sass 컴파일 방법에 대한 내용입니다.

 

Sass 컴파일 방법

 

1. Sass 설치하기

Sass를 사용하기 위해서는 먼저 Sass를 설치해야 합니다. Sass를 설치하는 방법은 여러 가지가 있지만, npm을 이용한 방법을 설명하겠습니다.

npm install -g sass​

위 명령어를 실행하면 Sass가 전역으로 설치됩니다.

2. Sass 파일 작성하기

Sass 파일은 확장자가 .sass 또는 .scss로 끝나는 파일입니다. Sass 파일을 작성할 때는 CSS와 비슷하지만, 변수, 함수, mixin 등의 기능을 활용할 수 있습니다. 아래는 간단한 Sass 파일의 예시입니다.

$primary-color: #ff0000;
body {
	background-color: $primary-color;
}

3. Sass 파일을 CSS로 컴파일하기

Sass 파일을 CSS로 컴파일하는 방법은 여러 가지가 있지만, 명령어를 이용한 방법을 설명하겠습니다. 터미널을 열어 아래와 같이 입력합니다.

sass input.scss output.css

위 명령어에서 input.scss는 컴파일할 Sass 파일 이름을, output.css는 컴파일한 결과를 저장할 CSS 파일 이름을 의미합니다. 예시를 들면 아래와 같습니다.

반응형

sass styles.scss styles.css

위 명령어를 실행하면 styles.scss 파일이 styles.css 파일로 컴파일됩니다.

또는, Sass 파일의 변경을 감지하고 자동으로 CSS로 컴파일해주는 명령어도 있습니다. 아래와 같이 입력합니다.

sass --watch input.scss:output.css

위 명령어에서 –watch 옵션은 Sass 파일의 변경을 감지하는 옵션입니다. 예시를 들면 아래와 같습니다.

sass --watch styles.scss:styles.css

위 명령어를 실행하면 styles.scss 파일이 수정될 때마다 자동으로 styles.css 파일이 업데이트됩니다.

결론

위와 같이 Sass 파일을 CSS로 컴파일하는 방법에 대해 알아보았습니다. Sass를 사용하면 CSS 코드를 더욱 간결하고 유지보수하기 쉽게 작성할 수 있습니다.