Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

4.7 KiB

Raw Blame History

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

title

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.

매 응용

Design system: 매 token (color, spacing, typography) 의 SCSS variable.
Component library: 매 mixin 으로 button/card variant 생성.
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 통합

4.7 KiB Raw Blame History