티스토리 뷰

IT지식

SASS, CSS의 번거러움을 해결

고슈슈 2024. 8. 19. 15:08

CSS로 웹사이트를 꾸밀 때, 코드가 점점 길어지고 복잡해지면 관리하기가 어려워지는 경험이 있을 겁니다. 이런 상황에서 여러분을 구원해 줄 도구가 있으니, 바로 SASS입니다. SASS는 CSS를 더 효율적으로 작성할 수 있도록 도와주는 스타일시트 언어입니다.

오늘은 SASS가 무엇인지, 어떻게 사용하는지, 그리고 왜 SASS를 사용하면 좋은지 알아보겠습니다.

※ SASS란 무엇인가요?

SASS(Syntactically Awesome Stylesheets)는 CSS의 전처리기(preprocessor)로, CSS 코드를 더 깔끔하고 효율적으로 작성할 수 있게 해줍니다. 그냥 CSS를 작성하는 것과 비교하면, SASS는 마치 CSS에 "수퍼파워"를 부여하는 것과 같습니다. 변수를 사용해 반복되는 코드를 줄이고, 중첩(nesting)을 통해 구조화된 코드를 작성할 수 있으며, 여러 파일로 코드를 나누어 관리할 수 있게 해줍니다.

한마디로, SASS는 CSS보다 더 똑똑한 스타일시트 언어라고 할 수 있습니다. 기본적으로 SASS로 작성된 코드는 일반 CSS로 컴파일되기 때문에, 브라우저에서는 그대로 CSS처럼 작동합니다.

※ SASS의 주요 기능은 무엇이 있을까요?

1. 변수(Variables)

CSS를 작성하다 보면 색상, 폰트 크기, 간격 같은 값들을 여러 곳에서 반복해서 사용하게 됩니다. 이때 SASS의 변수 기능을 사용하면 이러한 값들을 한 곳에 모아 관리할 수 있습니다. 예를 들어, 웹사이트의 메인 색상을 변수로 지정하면, 나중에 색상을 바꾸고 싶을 때 변수 값만 수정하면 모든 관련 스타일이 자동으로 업데이트되는 것입니다.

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

body {
    font-family: $font-stack;
    color: $primary-color;
}

↑ 위 코드에서 $primary-color와 $font-stack이 변수예요. 이렇게 변수를 사용하면 코드가 훨씬 더 유지보수하기 쉬워집니다.

2. 중첩(Nesting)

CSS에서 계층 구조를 표현하려면 셀렉터를 길게 써야 할 때가 많습니다. 하지만 SASS의 중첩 기능을 사용하면 코드의 가독성이 훨씬 좋아집니다. 마치 HTML의 계층 구조를 따라가듯이, SASS에서는 스타일 규칙을 중첩해서 작성할 수 있습니다.

nav {
    background-color: #333;

    ul {
        list-style: none;

        li {
            display: inline-block;

            a {
                color: white;
                text-decoration: none;
            }
        }
    }
}

↑ 위 코드에서는 nav 내부에 있는 ul과 그 안의 li, 그리고 a 태그에 대한 스타일을 중첩해 표현하고 있습니다. CSS에서는 이걸 하나하나 따로 작성해야 했겠지만, SASS에서는 이렇게 간단하게 구조를 표현할 수 있습니다.

3. Partial와 Import

SASS에서는 코드를 여러 파일로 나눌 수 있습니다. 이렇게 하면 큰 프로젝트에서도 스타일시트를 잘 조직화할 수 있습니다. 각각의 작은 파일을 partial이라고 부르는데, 파일 이름이 보통 _header.scss처럼 밑줄(_)로 시작합니다. 이 파셜들은 최종 CSS 파일로 컴파일될 때 하나로 합쳐집니다.

// _header.scss
.header {
    background-color: $primary-color;
}

// main.scss
@import 'header';

↑ 위 코드에서 보았을 때 main.scss 파일에 @import를 사용해 _header.scss 파일을 불러오면, 이 파일은 최종적으로 하나의 CSS 파일로 합쳐집니다. 이렇게 코드 분할과 재사용이 쉬워지니, 관리하기도 훨씬 수월해집니다.

4. Mixin

Mixin은 반복되는 CSS 코드를 재사용할 수 있게 해주는 기능입니다. 자주 사용하는 스타일 블록을 하나의 Mixin으로 만들어두고, 필요할 때마다 호출하면 됩니다. 이는 특히 CSS3의 벤더 프리픽스(-webkit-, -moz- 등)를 처리할 때 매우 유용합니다.

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
            border-radius: $radius;
}

.box {
    @include border-radius(10px);
}

↑ 여기서 border-radius라는 믹스인을 정의했고, .box 클래스에 이를 적용했습니다. 이렇게 하면 복잡한 코드도 깔끔하게 재사용할 수 있습니다.

※ SASS의 장점은 무엇이 있을까요?

SASS를 사용하면 많은 장점이 있습니다.

그중에서도 4가지 중요한 이유를 살펴보겠습니다.

1. 코드 재사용

변수를 사용해 자주 쓰는 값들을 쉽게 재사용할 수 있고, 믹스인으로 반복되는 스타일을 한 번에 관리할 수 있습니다. 이로 인해 코드가 간결해지고, 유지보수가 쉬워집니다.

2. 구조화된 코드 작성

중첩과 임포트 기능을 통해 CSS 코드를 더 구조화할 수 있습니다. 특히, 큰 프로젝트에서 이 기능은 매우 유용합니다. 코드를 쉽게 나누고 관리할 수 있으니, 다른 팀원들과 협업할 때도 유리합니다.

3. 더 효율적인 작업

SASS는 CSS보다 더 강력한 기능을 제공해, 복잡한 스타일 작업도 더 쉽게 처리할 수 있습니다. 덕분에 개발 시간이 단축되고, 오류 발생 가능성도 줄어듭니다.

4. 커뮤니티와 확장성

SASS는 오랫동안 많은 개발자들이 사용해 온 만큼, 다양한 라이브러리와 도구들이 잘 마련되어 있습니다. Compass나 Bourbon 같은 유명한 SASS 프레임워크를 사용하면 더욱 강력한 스타일 작업이 가능합니다.

※ SASS는 어떻게 사용하나요?

저는 주로 VSCode를 사용하고 있어서 VSCode에서 SASS 사용방법에서 대해서 알아보겠습니다. 사실 VSCode에서 SASS를 사용하는 방법은 매우 간단합니다. 먼저, SASS를 컴파일할 수 있도록 Node.js와 SASS를 설치해야 합니다. 상단 터미널 탭에서 새 터미널을 열고 다음 명령어를 입력합니다.

npm install -g sass

이제 SASS 파일을 작성할 준비가 되었습니다. .scss 확장자를 가진 파일을 생성한 후, SASS 문법으로 스타일을 작성합니다. 예를 들어, styles.scss 파일에 스타일을 작성한 후 이를 CSS로 컴파일해야 합니다.

다시 터미널로 돌아가서, 다음 명령어를 입력해 SASS 파일을 CSS로 컴파일합니다.

sass styles.scss styles.css

또한, SASS 파일이 변경될 때마다 자동으로 컴파일되도록 하려면 --watch 옵션을 사용합니다.

sass --watch styles.scss:styles.css

VSCode에서 SASS를 더 편리하게 사용하려면, "Live Sass Compiler" 같은 확장 프로그램을 설치할 수도 있습니다. 이 확장을 설치하면, SASS 파일을 저장할 때마다 자동으로 CSS 파일이 생성됩니다. 화면 하단의 Watch Sass 버튼을 클릭해 이 기능을 활성화해봅니다.

이렇게 하면 VSCode에서 SASS를 쉽게 관리하고, 실시간으로 스타일 변경 사항을 확인할 수 있습니다.

SASS는 CSS를 더욱 효율적이고 강력하게 만들어주는 도구입니다. 변수를 사용해 반복되는 코드의 양을 줄이고, 중첩을 통해 더 구조적인 코드를 작성할 수 있으며, 믹스인으로 코드 재사용을 극대화할 수 있습니다. SASS를 사용하면 웹 개발 과정이 훨씬 더 쾌적해지고, 복잡한 프로젝트도 손쉽게 관리할 수 있습니다.

처음에는 조금 낯설 수 있지만, 몇 번 사용해보면 그 편리함에 빠져들게 되고 웹 디자인과 개발이 한층 더 재미있어질 것입니다!