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

· 17분 읽기 · 수정 중급
Sass 완벽 가이드 | CSS 전처리기·Variables·Nesting·Mixins·실전 활용

이 글의 핵심

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

아래 코드는 json를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

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

3. Variables

아래 코드는 scss를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

다음은 scss를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

.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

다음은 scss를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

다음은 scss를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

다음은 scss를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

다음은 scss를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

아래 코드는 javascript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

10. Vite 통합

npm install -D sass

아래 코드는 typescript를 사용한 구현 예제입니다. 필요한 모듈을 import하고. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables" as *;`,
      },
    },
  },
});

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

구조

아래 코드는 code를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

_variables.scss

다음은 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

다음은 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

다음은 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: 파일 분리

구현 체크리스트

  • Sass 설치
  • Variables 정의
  • Nesting 사용
  • Mixins 작성
  • Functions 구현
  • Modules 분리
  • Webpack/Vite 통합
  • 디자인 시스템 구축

같이 보면 좋은 글

  • 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. 네, 수많은 프로젝트에서 안정적으로 사용하고 있습니다.

... 996 lines not shown ... Token usage: 63706/1000000; 936294 remaining Start-Sleep -Seconds 3