Sass는 CSS를 더욱 효율적으로 작성하기 위한 전처리기(CSS Preprocessor)입니다. 두 가지 문법 형식을 지원하는데, 중괄호를 사용하는 .scss와 들여쓰기를 기반으로 하는 .sass가 있습니다. 이 가이드에서는 주로 널리 사용되는 SCSS 문법을 다룹니다.

기본 기능 및 활용

Sass를 사용하면 변수, 중첩, 모듈화 등 CSS에서 부족했던 기능들을 활용할 수 있습니다. npm install sass를 통해 설치 후 사용할 수 있으며, 작성된 코드는 컴파일 과정을 거쳐 브라우저가 이해할 수 있는 표준 CSS 파일로 변환됩니다.

변수와 중첩

변수는 $ 기호로 시작하며, 전역적으로 스타일 값을 관리할 때 유용합니다. 중첩(Nesting)은 HTML 구조와 유사하게 CSS를 계층적으로 작성할 수 있게 도와줍니다.

.sidebar {
  padding: 10px;
  .menu-item {
    color: blue;
    &:hover { color: red; }
  }
}

모듈 시스템 (@use)

Sass는 @use 규칙을 통해 스타일을 모듈 단위로 분리할 수 있습니다. 파일명 앞에 _를 붙인 파일(Partial)은 독립적인 CSS 파일로 컴파일되지 않으며, 다른 파일에서 불러와 사용하는 전용 모듈로 활용됩니다.

믹스인(Mixin)과 함수

@mixin은 재사용 가능한 스타일 조각을 정의할 때 사용합니다. 파라미터를 전달하여 유연한 스타일 적용이 가능합니다.

@mixin flex-center($gap: 10px) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $gap;
}

.container {
  @include flex-center(20px);
}

상속 (@extend)

% 기호로 정의된 자리표시자 선택자(Placeholder)를 @extend하여 스타일을 상속받을 수 있습니다. 이는 코드 중복을 획기적으로 줄여줍니다.

데이터 타입 및 연산

Sass는 숫자, 문자열, 색상, 리스트, Map 등 다양한 데이터 타입을 지원합니다. 수학적 연산이 필요한 경우 sass:math 모듈을 권장합니다.

• 숫자: math.div(10, 2)와 같은 함수를 사용하여 정밀한 계산이 가능합니다.
• 색상: sass:color 모듈을 사용하여 lighten(), darken() 등 색상을 동적으로 변환할 수 있습니다.
• 문자열: #{} 보간법을 사용하면 클래스명이나 속성값 내부에서 변수를 문자열로 결합할 수 있습니다.

제어 지시문

프로그래밍 언어처럼 조건문과 반복문을 스타일 작성에 도입할 수 있습니다.

$theme-colors: (primary: blue, secondary: gray);

@each $name, $value in $theme-colors {
  .btn-#{$name} {
    background-color: $value;
  }
}

@if, @for, @while 등 다양한 제어문을 활용하면 복잡한 반응형 디자인이나 유틸리티 클래스를 훨씬 간결하게 생성할 수 있습니다.