Sass의 @use와 옛 @import 차이는?

@import는 중복·전역 오염이 생기기 쉽고, @use는 모듈 스코프와 네임스페이스로 한 번 정리한 현대적 방식입니다. 새 프로젝트는 @use·@forward 쪽이 권장됩니다.

믹스인과 함수 중 무엇을 쓰나요?

스타일 조각을 반복 삽입할 때는 믹스인, 값 계산이 핵심이면 @function을 고려합니다. 과한 믹스인은 CSS 출력이 비대해질 수 있어 유틸 클래스와의 균형이 필요합니다.

CSS Variables와 Sass 변수, 무엇을 쓰나요?

런타임 테마·JS 연동·미디어쿼리와 함께 바꾸려면 CSS 변수, 빌드 타임 토큰·계산·레거시 합성에는 Sass 변수가 흔합니다. 함께 쓰는 경우도 많습니다.

Sass 셀렉터 중첩이 깊으면?

BEM 등으로 평탄한 클래스를 유지하거나, & 중첩을 3단 이하로 제한하는 팀도 많습니다. 인명 구체성(specificity) 전쟁을 피하는 것이 목표입니다.

Sass 완벽 가이드 | CSS 전처리기·Variables·Nesting·Mixins·실전 활용

2026년 4월 7일 · 3분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

Sass로 효율적인 CSS를 작성하는 완벽 가이드. Variables, Nesting, Mixins, Functions, Modules까지 실전 예제로 정리. Sass·SCSS·CSS 중심으로 설명합니다. Start now.

이 글의 핵심

Sass로 효율적인 CSS를 작성하는 완벽 가이드입니다. Variables, Nesting, Mixins, Functions, Modules까지 실전 예제로 정리했습니다.

실무 경험 공유: Sass를 도입하면서, CSS 코드가 50% 감소하고 유지보수가 훨씬 쉬워진 경험을 공유합니다.

들어가며: “CSS가 반복적이에요”

실무 문제 시나리오

시나리오 1: 같은 색상을 반복해요

하드코딩이 많습니다. Sass Variables로 관리합니다. 시나리오 2: 중첩 선택자가 복잡해요

.parent .child .grandchild가 길어집니다. Sass Nesting으로 간단히 합니다. 시나리오 3: 재사용 가능한 스타일이 필요해요

복사-붙여넣기를 합니다. Sass Mixins로 재사용합니다.

1. Sass란?

핵심 특징

Sass는 CSS 전처리기입니다. 주요 장점:

Variables: 재사용 가능한 값
Nesting: 중첩 선택자
Mixins: 재사용 가능한 스타일
Functions: 계산 가능
Modules: 파일 분리

2. 설치 및 기본 사용

설치

npm install -D sass

컴파일

npx sass src/styles.scss dist/styles.css

package.json

{
  "scripts": {
    "css": "sass src/styles.scss dist/styles.css",
    "css:watch": "sass --watch src/styles.scss dist/styles.css"
  }
}

3. Variables

스타일시트(CSS) 예제입니다.

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-base: 16px;
$spacing-unit: 8px;
// styles.scss
@use 'variables' as *;
.button {
  background: $primary-color;
  font-size: $font-size-base;
  padding: $spacing-unit * 2;
}

4. Nesting

스타일시트(CSS) 예제입니다.

.card {
  padding: 1rem;
  border: 1px solid #ccc;
  .title {
    font-size: 1.5rem;
    font-weight: bold;
  }
  .content {
    margin-top: 0.5rem;
  }
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  &.featured {
    border-color: #3498db;
  }
}

5. Mixins

스타일시트(CSS) 예제입니다.

// _mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin button($bg-color, $text-color) {
  background: $bg-color;
  color: $text-color;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
}
// styles.scss
@use 'mixins' as *;
.container {
  @include flex-center;
}
.btn-primary {
  @include button(#3498db, #fff);
}
.btn-secondary {
  @include button(#2ecc71, #fff);
}

6. Functions

스타일시트(CSS) 예제입니다.

// _functions.scss
@function rem($px) {
  @return #{$px / 16}rem;
}
@function lighten-color($color, $amount) {
  @return lighten($color, $amount);
}
// styles.scss
@use 'functions' as *;
.title {
  font-size: rem(24);
  color: lighten-color(#3498db, 10%);
}

7. Modules (@use)

스타일시트(CSS) 예제입니다.

// _variables.scss
$primary-color: #3498db;
// _mixins.scss
@mixin button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
}
// styles.scss
@use 'variables' as vars;
@use 'mixins';
.button {
  @include mixins.button;
  background: vars.$primary-color;
}

8. Partials

스타일시트(CSS) 예제입니다.

// _reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
// _typography.scss
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}
// styles.scss
@use 'reset';
@use 'typography';
@use 'components/button';

9. Webpack 통합

npm install -D sass-loader sass

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

10. Vite 통합

npm install -D sass

// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables" as *;`,
      },
    },
  },
});

11. 실전 예제: 디자인 시스템

구조

styles/
├── _variables.scss
├── _mixins.scss
├── _functions.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _button.scss
│   ├── _card.scss
│   └── _input.scss
└── main.scss

_variables.scss

// Colors
$primary: #3498db;
$secondary: #2ecc71;
$danger: #e74c3c;
$gray-100: #f8f9fa;
$gray-900: #212529;
// Spacing
$spacing-unit: 8px;
$spacing-xs: $spacing-unit;
$spacing-sm: $spacing-unit * 2;
$spacing-md: $spacing-unit * 3;
$spacing-lg: $spacing-unit * 4;
// Typography
$font-family-base: 'Arial', sans-serif;
$font-size-base: 16px;
$line-height-base: 1.6;

_mixins.scss

@use 'variables' as *;
@mixin button-variant($bg, $color) {
  background: $bg;
  color: $color;
  padding: $spacing-sm $spacing-md;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
@mixin responsive($breakpoint) {
  @if $breakpoint == sm {
    @media (min-width: 640px) { @content; }
  } @else if $breakpoint == md {
    @media (min-width: 768px) { @content; }
  } @else if $breakpoint == lg {
    @media (min-width: 1024px) { @content; }
  }
}

components/_button.scss

@use '../variables' as *;
@use '../mixins' as *;
.btn {
  @include button-variant($primary, #fff);
  &-secondary {
    @include button-variant($secondary, #fff);
  }
  &-danger {
    @include button-variant($danger, #fff);
  }
  &-sm {
    padding: $spacing-xs $spacing-sm;
    font-size: 0.875rem;
  }
  &-lg {
    padding: $spacing-md $spacing-lg;
    font-size: 1.125rem;
  }
}

정리 및 체크리스트

핵심 요약

Sass: CSS 전처리기
Variables: 재사용 가능한 값
Nesting: 중첩 선택자
Mixins: 재사용 가능한 스타일
Functions: 계산 가능
Modules: 파일 분리

구현 체크리스트

같이 보면 좋은 글

PostCSS 완벽 가이드
Tailwind CSS 완벽 가이드
CSS 완벽 가이드

이 글에서 다루는 키워드

Sass, SCSS, CSS, Preprocessor, Mixins, Variables, Frontend

자주 묻는 질문 (FAQ)

Q. SCSS와 Sass의 차이는 뭔가요?

A. SCSS는 CSS와 호환되는 문법이고, Sass는 들여쓰기 기반입니다. SCSS를 더 많이 사용합니다.

Q. PostCSS와 비교하면 어떤가요?

A. Sass가 더 많은 기능을 제공합니다. PostCSS는 더 빠르고 플러그인이 풍부합니다.

Q. Tailwind CSS와 함께 사용할 수 있나요?

A. 네, 함께 사용할 수 있습니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 수많은 프로젝트에서 안정적으로 사용하고 있습니다.

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「Sass 완벽 가이드 | CSS 전처리기·Variables·Nesting·Mixins·실전 활용」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「Sass 완벽 가이드 | CSS 전처리기·Variables·Nesting·Mixins·실전 활용」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

Keyboard Shortcuts

이 글의 핵심

이 글의 핵심

들어가며: “CSS가 반복적이에요”

실무 문제 시나리오

복사-붙여넣기를 합니다. Sass Mixins로 재사용합니다.

1. Sass란?

핵심 특징

2. 설치 및 기본 사용

설치

컴파일

package.json

3. Variables

4. Nesting

5. Mixins

6. Functions

7. Modules (@use)

8. Partials

9. Webpack 통합

10. Vite 통합

11. 실전 예제: 디자인 시스템

구조

_variables.scss

_mixins.scss

components/_button.scss

정리 및 체크리스트

핵심 요약

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

자주 묻는 질문 (FAQ)

Q. SCSS와 Sass의 차이는 뭔가요?

Q. PostCSS와 비교하면 어떤가요?

Q. Tailwind CSS와 함께 사용할 수 있나요?

Q. 프로덕션에서 사용해도 되나요?

심화 부록: 구현·운영 관점

내부 동작과 핵심 메커니즘

프로덕션 운영 패턴

확장 예시: 엔드투엔드 미니 시나리오

문제 해결(Troubleshooting)

이 글이 도움이 되셨나요?