SASS

핵심 개념

Variables

색상, 폰트, 간격 등 반복되는 값을 변수에 저장하고 재사용할 수 있습니다. $로 시작하는 이름으로 선언합니다.

Nesting

선택자를 중첩하여 HTML 구조를 반영한 스타일을 작성할 수 있습니다. 부모 선택자를 반복하지 않아 코드가 간결해집니다.

Mixins

재사용 가능한 스타일 블록을 정의하고 @include로 가져올 수 있습니다. 매개변수를 받아 동적으로 스타일을 생성할 수도 있습니다.

Partials

스타일시트를 여러 파일로 분리하고 @import로 합칠 수 있습니다. 파일명이 _로 시작하면 단독으로 컴파일되지 않습니다.

SCSS vs SASS

SCSS는 중괄호와 세미콜론을 사용하는 CSS 호환 문법이고, SASS는 들여쓰기 기반의 간결한 문법입니다. SCSS가 더 널리 사용됩니다.

변수와 중첩을 사용한 SCSS 예시

변수로 디자인 토큰을 정의하고, 믹스인으로 재사용 패턴을 만들며, 중첩으로 구조화된 스타일을 작성합니다. &는 부모 선택자를 참조합니다.

// 변수 정의
$primary-color: #3498db;
$spacing: 16px;
$border-radius: 4px;

// 믹스인 정의
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 중첩 규칙
.card {
  padding: $spacing;
  border-radius: $border-radius;
  background: white;

  .card-header {
    @include flex-center;
    color: $primary-color;
    margin-bottom: $spacing / 2;
  }

  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}