[CSS] CSS 작성을 편하게! SCSS(Sass) 기초 문법 가이드

by

CSS는 계속 발전하고 있지만, 대규모 프로젝트를 진행하다 보면 여전히 코드의 중복, 복잡한 구조, 관리의 어려움 같은 한계에 부딪히게 됩니다.

이러한 순수 CSS(Vanilla CSS)의 한계를 극복하고, 마치 프로그래밍 언어처럼 CSS를 더 체계적이고 효율적으로 작성할 수 있도록 도와주는 도구가 바로 **CSS 전처리기(Preprocessor)**입니다. 그리고 그중 가장 널리 사용되는 것이 바로 Sass(Syntactically Awesome Style Sheets), 그 중에서도 SCSS 문법입니다.

1. CSS 전처리기와 SCSS란?

CSS 전처리기란, 특별한 문법으로 작성된 코드를 브라우저가 이해할 수 있는 표준 CSS로 **컴파일(compile, 변환)**해주는 프로그램을 말합니다.

요리사가 자신만의 약어로 레시피를 빠르게 작성하면(SCSS), 보조 요리사가 그 레시피를 보고 누구나 알아볼 수 있는 정식 레시피로 옮겨 적는(표준 CSS로 컴파일) 과정과 같습니다. 👨‍🍳

Sass는 이러한 전처리기 중 하나이며, 두 가지 문법을 가집니다.

  • Sass: 중괄호{}와 세미콜론;을 사용하지 않고 들여쓰기로 구분하는 초기 문법.
  • SCSS (Sassy CSS): 표준 CSS와 거의 동일한 문법에 Sass의 강력한 기능들이 추가된 형태. 현재는 SCSS 문법이 표준처럼 사용됩니다.

2. SCSS 핵심 기능 살펴보기

SCSS는 표준 CSS의 모든 문법을 포함하므로, 기존 CSS 파일을 .scss로 확장자를 바꿔도 바로 동작합니다. 이제 SCSS가 제공하는 마법 같은 기능들을 살펴보겠습니다.

◼️ Nesting (중첩)

HTML의 부모-자식 관계처럼, SCSS에서도 선택자를 중첩하여 작성할 수 있습니다. 이는 코드의 가독성을 높이고 반복적인 선택자 입력을 줄여줍니다.

기존 CSS

nav {
  background: #333;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li a {
  color: white;
  text-decoration: none;
}

SCSS

nav {
  background: #333;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

HTML 구조가 그대로 보여 훨씬 직관적입니다.

◼️ Variables (변수)

CSS 변수(--)와 비슷하지만, SCSS 변수($)는 컴파일 과정에서 일반 값으로 변환된다는 차이점이 있습니다.

// 변수 선언
$primary-color: #007bff;
$base-font-size: 16px;

body {
  font-size: $base-font-size;
}

.button {
  background-color: $primary-color;
  &:hover { // '&'는 부모 선택자를 가리킴 (여기서는 .button)
    background-color: darken($primary-color, 10%); // 색상을 10% 어둡게 하는 내장 함수
  }
}

◼️ Mixin (믹스인 – 재사용 가능한 스타일 블록)

마치 ‘CSS 함수’처럼, 재사용하고 싶은 스타일 블록을 만들어 @include 키워드로 쉽게 불러올 수 있습니다. 특히 Flexbox 정렬처럼 반복적인 코드를 획기적으로 줄여줍니다.

Mixin 정의 (@mixin)

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Mixin 사용 (@include)

.login-box {
  @include flex-center;
  flex-direction: column;
}

.icon-wrapper {
  @include flex-center;
}

파라미터(인자)를 전달하여 동적으로 변하는 Mixin을 만들 수도 있어 활용도가 매우 높습니다.

◼️ Extend (상속)

@extend는 한 선택자가 다른 선택자의 모든 스타일 규칙을 그대로 ‘상속’받게 하는 기능입니다. 코드 중복을 줄이고 연관성 있는 스타일을 그룹화하는 데 유용합니다.

.message {
  border: 1px solid gray;
  padding: 10px;
  color: #333;
}

.success-message {
  @extend .message;
  border-color: green;
}

.error-message {
  @extend .message;
  border-color: red;
}

컴파일 후의 CSS 파일에서는 .message, .success-message, .error-message가 하나의 스타일 블록으로 묶여 효율적으로 관리됩니다.

요약 및 정리

  1. SCSS는 CSS 전처리기(Preprocessor)로, 프로그래밍 언어의 장점을 더해 CSS를 더 효율적으로 작성하게 해주는 도구입니다.
  2. **Nesting(중첩)**은 HTML과 유사한 구조로 CSS를 작성하여 가독성을 높입니다.
  3. Variables($), Mixins(@mixin/@include), Extend(@extend) 등의 기능을 통해 코드의 중복을 줄이고 재사용성을 극대화할 수 있습니다.
  4. SCSS로 작성된 코드는 브라우저가 읽을 수 있는 표준 CSS로 컴파일(변환)하는 과정이 반드시 필요합니다.