[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,100 +2,204 @@
|
||||
id: wiki-2026-0508-scss-sass
|
||||
title: SCSS (Sass)
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [Sass, SCSS, Dart Sass]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [frontend, css, scss, sass, preprocessor]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: SCSS
|
||||
framework: Dart Sass
|
||||
---
|
||||
|
||||
# [[SCSS (Sass)|SCSS (Sass]]
|
||||
# SCSS (Sass)
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
[[SCSS|SCSS]](Sassy CSS)는 일반적인 CSS에 프로그래밍 기능을 추가하여 확장한 CSS 전처리기(Preprocessor) 언어인 Sass의 문법 중 하나입니다. 변수, 중첩, 믹스인 등의 강력한 기능을 제공하여 복잡한 스타일을 모듈화하고 재사용 가능하게 만들어 유지보수성을 크게 향상시킵니다. 대규모 프론트엔드 환경에서는 고도의 커스텀 디자인 시스템을 구축하거나, [[CSS Modules|CSS Modules]] 등과 결합하여 전역 네임스페이스 충돌을 방지하는 실전 설계 도구로 널리 사용됩니다.
|
||||
## 매 한 줄
|
||||
> **"매 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 에서 견고.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
* **핵심 기능 및 코드 모듈화**
|
||||
SCSS는 변수(Variables), 중첩(Nesting), 믹스인(Mixins), 함수 및 반복문(Functions & loops)을 지원하여 평범한 CSS 파일을 넘어서는 동적이고 체계적인 스타일링을 가능하게 합니다 [1-3]. 특히 파일을 작고 관리하기 쉬운 조각(Partials)으로 나누고 `import`를 통해 불러옴으로써, 코드 구조를 개선하고 프로젝트 내 중복을 줄일 수 있습니다 [3]. BEM 방법론과 결합할 경우, SCSS의 중첩 기능을 통해 BEM의 긴 클래스명 작성을 단순화하고 의미론적인 구조를 깔끔하게 유지할 수 있습니다 [4, 5].
|
||||
## 매 핵심
|
||||
|
||||
* **SCSS의 장점과 도입 적합성**
|
||||
SCSS는 완전한 디자인 제어(Total design control)와 유연성을 제공하므로, 픽셀 단위의 정밀한 구현이 필요하거나 독자적인 디자인 시스템을 구축해야 하는 복잡한 대규모 프로젝트에 이상적입니다 [6-8]. 또한 HTML 내부에 유틸리티 클래스를 늘어놓지 않고 깔끔한 마크업을 유지하고자 하는 팀에게 적합하며 [6, 7], 기존 CSS에 이미 익숙한 개발자라면 학습 곡선이 짧다는 장점도 있습니다 [1].
|
||||
### 매 두 syntax
|
||||
- **SCSS**: 매 CSS-superset, `{}` `;` 사용 — 매 mainstream.
|
||||
- **Sass (indented)**: 매 Python-like indentation, `.sass` 확장자 — 매 niche.
|
||||
|
||||
* **단점 및 한계점**
|
||||
SCSS의 모든 연산은 빌드 타임(Build time)에 처리되므로 런타임의 상태 변화에 동적으로 반응하기 어렵습니다 [1]. 추가적인 빌드 도구와 컴파일 단계가 요구되어 프로젝트 설정 복잡도와 컴파일 시간이 증가합니다 [1, 9]. 명확한 아키텍처나 구조 없이 무분별하게 작성할 경우 관리가 어려워지고 출력되는 CSS 파일 크기가 비대해질 수 있으며, 본질적으로 CSS의 전역 스코프(Global scope) 문제를 그대로 상속받습니다 [1, 7, 10, 11].
|
||||
### 매 핵심 기능
|
||||
- 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.
|
||||
|
||||
* **실무에서의 최신 활용 전략 (Tailwind 및 CSS Modules와의 결합)**
|
||||
대규모 애플리케이션의 실전 설계에서는 SCSS의 단점을 보완하기 위해 여러 기법이 혼합되어 사용됩니다.
|
||||
* **CSS Modules와의 결합:** SCSS의 강력한 문법을 유지하면서도 CSS Modules를 통해 클래스명을 자동으로 고유하게 변환(Hashing)하여 전역 스코프 충돌을 해결하는 방식이 매우 자연스럽고 강력한 아키텍처로 평가받습니다 [12-16].
|
||||
* **[[Tailwind CSS|Tailwind CSS]]와의 혼합:** 레이아웃 구성에는 Tailwind의 유틸리티 클래스를 사용하여 개발 속도를 높이고, 복잡한 사용자 정의 컴포넌트나 고도의 커스텀 로직이 필요한 곳에는 SCSS를 사용하는 하이브리드 접근법도 존재합니다 [11, 16]. SCSS 파일 내부에서 Tailwind의 `@apply` 지시어를 사용하거나 공유 디자인 토큰을 활용해 두 시스템을 통합할 수 있습니다 [11, 17, 18].
|
||||
### 매 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.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[CSS Modules|CSS Modules]], Tailwind CSS, [[BEM|BEM]], CSS Preprocessors
|
||||
- **Projects/Contexts:** [[디자인 시스템 구축|디자인 시스템 구축]], 대규모 프론트엔드 아키텍처, 컴포넌트 스타일링 전략
|
||||
- **Contradictions/Notes:** 소스에 따르면 SCSS는 복잡한 로직과 커스텀 디자인을 위해 실무에서 여전히 유효하지만, 최근 최신 바닐라 CSS가 중첩(Nesting)과 같은 기능을 기본적으로 지원하게 되면서 SCSS 특유의 추가적인 빌드(Compile) 단계를 거칠 필요가 없다고 주장하며 순수 CSS로 회귀하는 의견도 존재합니다 [19, 20]. 또한, 런타임 오버헤드가 없는 유틸리티 우선(Tailwind)이나 [[CSS-in-JS|CSS-in-JS]]의 부상으로 JS 생태계 내에서 SCSS의 인기가 예전보다 감소했다는 지적도 있습니다 [1].
|
||||
### 매 응용
|
||||
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.
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-26*
|
||||
## 💻 패턴
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### Variable + Nesting
|
||||
```scss
|
||||
$primary: #007bff;
|
||||
$radius: 4px;
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: $radius;
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
&__header {
|
||||
color: $primary;
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
|
||||
- **과거 데이터와의 충돌:** 없음
|
||||
- **정책 변화:** 없음
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
&:hover {
|
||||
color: darken($primary, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### Mixin
|
||||
```scss
|
||||
@mixin flex-center($direction: row) {
|
||||
display: flex;
|
||||
flex-direction: $direction;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
.modal {
|
||||
@include flex-center(column);
|
||||
}
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### `@use` module system (modern, replaces `@import`)
|
||||
```scss
|
||||
// _colors.scss
|
||||
$primary: #007bff;
|
||||
$secondary: #6c757d;
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
// _mixins.scss
|
||||
@mixin shadow($level: 1) {
|
||||
box-shadow: 0 #{$level * 2}px #{$level * 4}px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
// app.scss
|
||||
@use 'colors' as c;
|
||||
@use 'mixins' as m;
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
.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
|
||||
- 부모: [[CSS]] · [[Preprocessor]]
|
||||
- 변형: [[Sass_indented]] · [[Less]] · [[Stylus]] · [[PostCSS]]
|
||||
- 응용: [[Bootstrap]] · [[Material_Design]] · [[Design_System]]
|
||||
- Adjacent: [[Tailwind_CSS]] · [[CSS_Modules]] · [[vanilla-extract]] · [[CSS_Nesting]]
|
||||
|
||||
## 🤖 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 통합 |
|
||||
|
||||
Reference in New Issue
Block a user