[SASS] SASS 설치 및 사용법

sass

SASS 초기설정 방법

Sass는 CSS의 전처리기(preprocessor) 중 하나로, 변수, 함수, 중첩(nesting) 등의 기능을 제공하여 CSS 작성의 효율성과 유지보수성을 높일 수 있습니다. Sass를 사용하기 위해서는 Sass가 작성된 코드를 CSS로 컴파일해주는 도구가 필요합니다. 이번에는 Sass를 사용하기 위한 초기설정 방법을 알아보겠습니다.

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets

1. Node.js 설치

Sass를 사용하기 위해서는 Node.js가 설치되어 있어야 합니다. Node.js는 Sass 컴파일러를 실행하는 데 필요한 JavaScript 런타임입니다. Node.js가 설치되어 있지 않다면 공식 홈페이지에서 다운로드하여 설치합니다.

2. Sass 설치

Sass는 Node.js의 패키지 매니저인 npm을 이용해 설치할 수 있습니다. 명령 프롬프트나 터미널에서 아래의 명령어를 입력하여 Sass를 전역으로 설치합니다.

npm install -g sass

3. Sass 컴파일

Sass를 설치한 후에는 Sass 코드를 CSS로 컴파일할 수 있습니다. 컴파일 방법은 크게 두 가지로 나뉩니다. 첫 번째는 Sass 파일을 직접 컴파일하는 방법이고, 두 번째는 Sass 파일이 수정될 때마다 자동으로 컴파일하는 방법입니다.

Sass 파일 직접 컴파일

Sass 파일을 직접 컴파일하기 위해서는 아래의 명령어를 입력합니다.

sass input.scss output.css

위 명령어에서 input.scss는 컴파일할 Sass 파일의 경로를, output.css는 컴파일된 CSS 파일의 경로를 나타냅니다. 이 명령어를 실행하면 input.scss 파일이 output.css 파일로 컴파일됩니다.

자동 컴파일

Sass 파일이 수정될 때마다 자동으로 컴파일하기 위해서는 아래의 명령어를 입력합니다.

sass --watch input.scss output.css

위 명령어에서 --watch 옵션은 Sass 파일이 수정될 때마다 자동으로 컴파일하도록 설정하는 옵션입니다. 이 명령어를 실행하면 input.scss 파일이 수정될 때마다 output.css 파일로 자동으로 컴파일됩니다.

 

SASS 사용방법

Sass를 사용하면 CSS 작성 시 많은 기능들을 사용할 수 있습니다. 이번에는 Sass의 기본 사용법에 대해서 알아보겠습니다.

1. 변수

Sass에서는 $ 기호를 이용해 변수를 정의할 수 있다.

// Sass에서 변수 정의하기
$primary-color: #007bff;
$secondary-color: #6c757d;

// 변수 사용하기
button {
  background-color: $primary-color;
  color: $secondary-color;
}

위 코드에서는 $primary-color와 $secondary-color라는 두 개의 변수를 정의하고, button 요소에 background-color와 color 속성으로 변수를 사용하고 있습니다.

2. 중첩

Sass에서는 CSS에서 사용되는 중첩 구조와 유사한 방법으로 중첩(nesting)을 사용할 수 있습니다. 중첩을 사용하면 HTML의 구조와 일치하는 CSS 코드를 작성할 수 있습니다.

 

// 중첩 사용하기
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
      display: inline-block;
      margin: 0 10px;
      
      a {
        color: $primary-color;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

위 코드에서는 nav, ul, li, a 요소들을 중첩 구조로 작성하고 있습니다. 이를 통해 HTML 구조와 일치하는 CSS 코드를 작성할 수 있습니다.

3. 함수

Sass에서는 함수를 정의하여 재사용성을 높일 수 있습니다. 함수는 @function 키워드를 이용해 정의할 수 있습니다.

 

// 함수 사용하기
@function calculate-width($width) {
  @return $width * 2;
}

.container {
  width: calculate-width(100px);
}

위 코드에서는 calculate-width라는 함수를 정의하고, container 클래스에 함수를 사용하고 있습니다. 함수는 @return 키워드를 이용해 반환값을 지정할 수 있습니다.

Sass를 사용하면 변수, 중첩, 함수 등을 이용하여 CSS 작성의 효율성과 유지보수성을 높일 수 있습니다. 초기설정 방법을 숙지한 후에는, 더욱 많은 기능을 활용하여 웹 개발의 생산성을 높여보세요!