Sass 통합

Sass(Syntactically Awesome Style Sheets)는 CSS를 더 효율적으로 작성할 수 있게 해주는 전처리기입니다.

Next.js에서 Sass를 사용하면 스타일 관리를 더욱 체계적으로 할 수 있습니다.

이 절에서는 Next.js 프로젝트에 Sass를 통합하는 방법과 효과적인 사용 전략에 대해 알아보겠습니다.

Sass 설정 방법

Sass 설치

npm install sass

Next.js는 자동으로 Sass를 감지하고 컴파일합니다. 추가 설정이 필요 없습니다.
.scss 또는 .sass 확장자를 사용하여 Sass 파일을 생성합니다.

Sass의 주요 기능 활용

변수 사용

// variables.scss
$primary-color: #0070f3;
$font-size-base: 16px;
 
// Button.module.scss
@import 'variables';
 
.button {
  background-color: $primary-color;
  font-size: $font-size-base;
}

믹스인(Mixins) 활용

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.container {
  @include flex-center;
  height: 100vh;
}

네스팅(Nesting)

.card {
  border: 1px solid #ddd;
 
  .title {
    font-size: 1.5em;
    color: $primary-color;
  }
 
  .content {
    padding: 15px;
 
    p {
      margin-bottom: 10px;
    }
  }
}

CSS 모듈과 Sass 함께 사용하기

Sass 파일을 CSS 모듈로 사용할 수 있습니다.

// Button.module.scss
.button {
  padding: 10px 15px;
  background-color: $primary-color;
  color: white;
 
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

import styles from './Button.module.scss'
 
export default function Button({ children }) {
  return <button className={styles.button}>{children}</button>
}

Sass의 장점

변수 사용 : 색상, 크기 등을 쉽게 관리
중첩 규칙 : 더 직관적이고 가독성 높은 코드 작성
믹스인 : 재사용 가능한 스타일 블록 생성
함수와 연산 : 동적인 스타일 계산 가능
모듈화 : 스타일을 작은 파일로 분리하고 쉽게 임포트

효과적인 사용 전략

글로벌 스타일 관리 : 변수, 믹스인 등을 별도의 파일로 관리
컴포넌트별 스타일링 : Sass 모듈을 사용하여 컴포넌트별 스타일 캡슐화
테마 시스템 구축 : 변수를 활용하여 쉽게 테마 전환 가능
반응형 디자인 : 믹스인을 사용하여 미디어 쿼리 관리

12장 성능 최적화와의 연관성

Sass 사용은 12장의 성능 최적화와 밀접하게 연관됩니다.

Sass를 통해 CSS를 모듈화하고 최적화할 수 있습니다.

예를 들어, 불필요한 스타일을 제거하고, 중복을 줄이며, 파일 크기를 최소화할 수 있습니다.

또한, Sass의 변수와 믹스인을 활용하면 일관된 스타일을 유지하면서도 성능을 개선할 수 있습니다.

실습 : 테마 변경이 가능한 UI 컴포넌트

다음 요구사항을 만족하는 테마 변경 가능한 버튼 컴포넌트를 구현해보세요.

라이트 테마와 다크 테마 지원
테마에 따라 색상과 스타일 변경
Sass 변수와 믹스인 활용

구현 예시

// themes.scss
$themes: (
  light: (
    background: #ffffff,
    text: #000000,
    primary: #0070f3,
  ),
  dark: (
    background: #1a1a1a,
    text: #ffffff,
    primary: #3291ff,
  )
);
 
@mixin themed() {
  @each $theme, $map in $themes {
    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $value in $map {
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}
 
@function t($key) {
  @return map-get($theme-map, $key);
}
 
// Button.module.scss
@import 'themes';
 
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
 
  @include themed() {
    background-color: t('primary');
    color: t('text');
  }
 
  &:hover {
    @include themed() {
      background-color: darken(t('primary'), 10%);
    }
  }
}
 
// ThemeToggle.module.scss
@import 'themes';
 
.toggle {
  @include themed() {
    background-color: t('background');
    color: t('text');
  }
}

// Button.js
import styles from './Button.module.scss'
 
export default function Button({ children }) {
  return <button className={styles.button}>{children}</button>
}
 
// ThemeToggle.js
import { useState } from 'react'
import styles from './ThemeToggle.module.scss'
 
export default function ThemeToggle({ children }) {
  const [theme, setTheme] = useState('light')
 
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light')
  }
 
  return (
    <div className={`theme-${theme} ${styles.toggle}`}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      {children}
    </div>
  )
}
 
// App.js
import ThemeToggle from './ThemeToggle'
import Button from './Button'
 
export default function App() {
  return (
    <ThemeToggle>
      <h1>Theme Toggle Example</h1>
      <Button>Click me</Button>
    </ThemeToggle>
  )
}

이 실습을 통해 Sass의 변수, 믹스인, 함수를 활용하여 테마 변경이 가능한 UI 컴포넌트를 구현하는 방법을 경험할 수 있습니다.

이는 실제 프로젝트에서 자주 사용되는 패턴으로, Sass의 강력한 기능을 활용하여 유지보수가 용이하고 확장 가능한 스타일 시스템을 구축하는 방법을 보여줍니다.

이전으로 다음으로