SASS (Syntactically Awesome Style Sheets)는 CSS 전처리기로, CSS 작성을 더 쉽고 효율적으로 만들어 주는 도구입니다. SASS 파일을 작성하여 CSS로 컴파일하는 방법을 알아보겠습니다.

1. SASS 설치하기

SASS를 사용하기 위해서는 우선 SASS를 설치해야 합니다. Node.js가 컴퓨터에 설치되어 있어야 합니다.

터미널을 열고 다음 명령어를 입력하여 SASS를 전역으로 설치합니다:

$ npm install -g sass

2. SASS 파일 작성하기

SASS 파일은 확장자가 .scss인 파일로 작성됩니다. 일반적으로 CSS와 비슷한 구문을 사용하지만, 변수, 중첩 규칙, 믹스인, 상속 등의 기능을 사용할 수 있습니다.

예를 들어, styles.scss라는 파일을 만들고 다음과 같이 작성합니다:

$primary-color: #ff0000;

.container {
  background-color: $primary-color;
  
  h1 {
    font-size: 24px;
  }
}

3. SASS 컴파일하기

SASS 파일을 CSS로 컴파일하려면 sass 명령어를 사용합니다. 다음은 명령어의 기본 구문입니다:

$ sass input.scss output.css

input.scss는 컴파일하고자 하는 SASS 파일의 경로를, output.css는 컴파일된 CSS 파일을 저장할 경로를 나타냅니다.

예를 들어, styles.scss를 컴파일하여 styles.css라는 파일로 저장하려면 다음과 같은 명령어를 입력합니다:

$ sass styles.scss styles.css

컴파일이 성공적으로 완료되면, styles.css 파일이 생성됩니다. 해당 CSS 파일은 웹 페이지나 애플리케이션에서 사용할 수 있습니다.

결론

SASS를 사용하면 CSS 작성을 더욱 편리하게 할 수 있습니다. SASS 파일을 컴파일하여 CSS로 변환하는 방법에 대해 알아보았습니다. 이제 즐겁게 SASS를 활용하여 웹 페이지를 스타일링해보세요!

#sass #css