SCSS

핵심 개념

Variable

$ 기호로 시작하는 변수를 선언해 색상·크기·폰트 등을 재사용할 수 있습니다. 전역 테마 값을 한곳에서 관리할 때 유용합니다.

Nesting

선택자를 중첩해서 작성할 수 있어 HTML 구조를 반영한 스타일 계층을 표현합니다. & 기호로 부모 선택자를 참조할 수 있습니다.

Mixin

@mixin으로 스타일 블록을 정의하고 @include로 재사용합니다. 매개변수를 받아 동적인 스타일 조합을 만들 수 있습니다.

Partial & Import

파일명 앞에 _를 붙인 partial 파일로 스타일을 분할하고, @import나 @use로 불러와 모듈화된 구조를 만듭니다.

Function

@function으로 값을 계산해 반환하는 함수를 정의합니다. 색상 조작, 단위 변환 등 계산 로직을 캡슐화할 때 사용합니다.

변수, 중첩, 믹스인 기본 예시

변수로 테마 값을 정의하고, 믹스인으로 공통 레이아웃을 재사용하며, BEM 네이밍을 중첩 문법으로 표현한 예시입니다.

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

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

// 중첩 & 사용
.card {
  background: white;
  border-radius: $border-radius;

  &__header {
    @include flex-center;
    color: $primary-color;
  }

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