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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-scss-sass	SCSS (Sass)	10_Wiki/Topics	verified	self	Sass SCSS Dart Sass	none	A	0.9	applied	frontend css scss sass preprocessor		2026-05-10	pending	language framework SCSS 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

$primary: #007bff;
$radius: 4px;

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

  &__header {
    color: $primary;

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

Mixin

@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)

// _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)

$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)

: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

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

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

Vite 7 SCSS 설정

// 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 통합