2nd/10_Wiki/Topics/Frontend/SCSS (Sass).md

---
id: wiki-2026-0508-scss-sass
title: SCSS (Sass)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Sass, SCSS, Dart Sass]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [frontend, css, scss, sass, preprocessor]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: SCSS
  framework: Dart Sass
---

# SCSS (Sass)

## 매 한 줄
> **"매 CSS 의 superset preprocessor — variable, nesting, mixin, module"**. 2006 Hampton Catlin 출시. 2020 Dart Sass 의 only 공식 implementation (LibSass deprecated). 2026 매 Tailwind v4 / native CSS nesting 의 부상으로 점유율 감소했지만 매 design system / legacy 에서 견고.

## 매 핵심

### 매 두 syntax
- **SCSS**: 매 CSS-superset, `{}` `;` 사용 — 매 mainstream.
- **Sass (indented)**: 매 Python-like indentation, `.sass` 확장자 — 매 niche.

### 매 핵심 기능
- Variable: `$primary: #007bff;`
- Nesting: 매 selector 중첩 + `&` (parent reference).
- Mixin: `@mixin` / `@include` — reusable block.
- Function: `@function` — value 반환.
- Module system: `@use` / `@forward` (2019+, 매 `@import` deprecated).
- Inheritance: `@extend`.
- Math/color operations.

### 매 2026 상태
- Native CSS: nesting (Baseline 2024), `var()`, `@layer`, container query — 매 SCSS 의 일부 기능 native.
- Tailwind v4: 매 utility-first → SCSS 의 design system 사용 감소.
- 여전히 활발: Bootstrap 5, Material Design legacy, Rails 8 default.

### 매 응용
1. Design system: 매 token (color, spacing, typography) 의 SCSS variable.
2. Component library: 매 mixin 으로 button/card variant 생성.
3. Theme switching: 매 SCSS map + CSS custom property hybrid.

## 💻 패턴

### Variable + Nesting
```scss
$primary: #007bff;
$radius: 4px;

.card {
  background: white;
  border-radius: $radius;

  &__header {
    color: $primary;

    &:hover {
      color: darken($primary, 10%);
    }
  }
}
```

### Mixin
```scss
@mixin flex-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
}

.modal {
  @include flex-center(column);
}
```

### `@use` module system (modern, replaces `@import`)
```scss
// _colors.scss
$primary: #007bff;
$secondary: #6c757d;

// _mixins.scss
@mixin shadow($level: 1) {
  box-shadow: 0 #{$level * 2}px #{$level * 4}px rgba(0,0,0,0.1);
}

// app.scss
@use 'colors' as c;
@use 'mixins' as m;

.button {
  background: c.$primary;
  @include m.shadow(2);
}
```

### Map + each loop (theme tokens)
```scss
$spacing: (
  xs: 4px,
  sm: 8px,
  md: 16px,
  lg: 24px,
);

@each $name, $value in $spacing {
  .p-#{$name} { padding: $value; }
  .m-#{$name} { margin: $value; }
}
```

### CSS custom property + SCSS hybrid (theme switch)
```scss
:root {
  --bg: #fff;
  --text: #000;
}
[data-theme='dark'] {
  --bg: #111;
  --text: #eee;
}

@function token($name) {
  @return var(--#{$name});
}

body {
  background: token(bg);
  color: token(text);
}
```

### Function
```scss
@function rem($px) {
  @return #{$px / 16}rem;
}

.title {
  font-size: rem(24); // 1.5rem
}
```

### Vite 7 SCSS 설정
```ts
// vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler', // Dart Sass embedded API
        additionalData: `@use "@/styles/_globals" as *;`,
      },
    },
  },
});
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| New project (greenfield 2026) | Native CSS + Tailwind v4 |
| Existing Bootstrap project | SCSS (built-in) |
| Design system with tokens | SCSS map + CSS var hybrid |
| Theme switching | CSS custom property (SCSS optional) |
| Rails 8 / Phoenix | SCSS (default) |
| React app | CSS Modules / Tailwind / vanilla-extract |

**기본값**: 매 새 project 매 native CSS + Tailwind v4. 매 SCSS 매 design-system / legacy 의 limited use.

## 🔗 Graph
- 응용: [[Material_Design]] · [[Design_System]]
- Adjacent: [[Tailwind CSS]] · [[CSS Modules]] · [[vanilla-extract]]

## 🤖 LLM 활용
**언제**: 매 large design system, theme variable, legacy Bootstrap project.
**언제 X**: 매 utility-first (Tailwind), 매 native CSS nesting/var 으로 충분한 경우.

## ❌ 안티패턴
- **`@import` 사용**: deprecated (2024) — 매 `@use`/`@forward` 사용.
- **Deep nesting (4+ level)**: 매 specificity 폭발, BEM-like flat 으로.
- **LibSass 사용**: 매 deprecated 2020 — Dart Sass 만.
- **Color function 의 변경 무시**: 매 `darken()` 의 공식 deprecation (2024) → `color.adjust()` 사용.

## 🧪 검증 / 중복
- Verified (Sass 1.81+, Dart Sass docs, Vite 7 release).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — `@use` module / Dart Sass / Vite 통합 |