📌 SCSS : 변수, 중첩, @mixin 정리!

Dev디자인 2025. 4. 15. 16:33

SCSS(Sassy CSS)의 핵심 기능인 변수, 중첩 규칙, 믹스인을 배웠다.

실제 예제를 통해 쉽게 이해할 수 있도록 정리해보았다!

1️⃣ SCSS 설치 방법

SCSS를 사용하려면 프로젝트에 sass 패키지를 설치해야 한다. Vite 또는 CRA 환경 모두 동일하게 설치하면 된다.

npm install sass

설치 후에는 .scss 확장자의 파일을 생성하고 import './파일명.scss' 형태로 JS/JSX에서 불러올 수 있다.

예를 들어, App.jsx 파일에서 다음과 같이 SCSS 파일을 불러올 수 있다.

import './App.scss'

2️⃣ SCSS의 변수 사용법

▸ 변수 선언 및 사용 방법

SCSS 변수는 $ 기호를 앞에 붙여 선언한다. CSS에서는 동일한 값을 반복해서 작성해야 하지만

SCSS에서는 변수로 지정한 값을 여러 곳에서 재사용할 수 있어 유지보수에 유리하다.

// App.scss
$main-color: #3498db;
$text-color: #2c3e50;
$padding: 1rem;

.test {
  color: $text-color;
  background-color: $main-color;
  padding: $padding;
}

▸ 다양한 데이터 타입에 대한 변수 사용 예시

SCSS 변수는 색상뿐 아니라 문자열, 숫자, 단위 포함 수치, 불리언 등 다양한 타입을 지원한다.

$font-stack: 'Helvetica, sans-serif';
$max-width: 1200px;
$enable-dark-mode: true;

이러한 변수는 복잡한 스타일을 일관되게 적용하고, 테마에 따라 조건부 스타일링할 때도 유용하다.

▸ 실제 JSX 적용 예시

<div className='test'>테스트용 div 입니다.</div>

test 클래스는 위에서 선언한 SCSS 변수들을 사용하여 다음과 같은 스타일을 갖는다

.test {
  color: $text-color;
  background-color: $main-color;
  padding: $padding;
}

또한 아래와 같이 ul 태그로 구성된 리스트에도 스타일이 적용될 수 있다

<ul>
  <li>안녕하세요</li>
  <li>반갑습니다</li>
  <li>SCSS를</li>
  <li>공부해봅시다</li>
</ul>

3️⃣ SCSS의 중첩 규칙 이해 및 활용

▸ 기본 중첩 규칙 예시

기존 CSS는 요소마다 중복된 셀렉터를 계속 반복해야 한다. SCSS는 HTML 구조처럼 계층적으로 코드를 작성할 수 있어 직관적이다.

ul {
  li {
    color: red;
    p {
      font-weight: bold;
    }
  }
}

▸ 실제 적용 구조

<ul>
  <li>안녕하세요<p>P요소 입니다.</p></li>
  <li>반갑습니다<section>Section 요소입니다.</section></li>
  <li>SCSS를<article>Article 요소입니다<h3>H3요소 입니다</h3></article></li>
  <li>공부해봅시다<h2>H2요소 입니다</h2></li>
</ul>

위 HTML 구조에 맞춰 SCSS를 중첩 방식으로 적용하면 다음과 같다

ul {
  li {
    color: #555;

    p {
      color: blue;
    }
    section {
      font-style: italic;
    }
    article {
      background: #f1f1f1;

      h3 {
        font-size: 18px;
      }
    }
    h2 {
      color: crimson;
    }
  }
}

▸ 중첩 사용 시 장단점

장점: 구조가 명확해지고 중복된 셀렉터를 줄일 수 있다.
단점: 중첩이 깊어질수록 코드가 오히려 가독성이 떨어질 수 있으며, CSS specificity 문제가 발생할 수 있다.
(3~4단계 이상은 피하는 것이 좋다)

4️⃣ SCSS 믹스인의 이해 및 활용

▸ 믹스인 선언 및 호출 방법

반복되는 스타일 코드를 하나의 블록으로 만들고 재사용할 수 있게 하는 기능이 믹스인이다.

@mixin으로 정의하고, @include로 호출한다.

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.test {
  @include flex-center;
}

▸ 인자를 사용하는 믹스인의 활용법

@mixin font-style($size, $weight, $color) {
  font-size: $size;
  font-weight: $weight;
  color: $color;
}

h2 {
  @include font-style(24px, 700, #333);
}

▸ 코드 재사용 예시 (기존 CSS → SCSS 믹스인 변환)

/* 기존 CSS */
.button {
  padding: 12px 20px;
  background-color: green;
  color: white;
  border-radius: 5px;
}
.alert {
  padding: 12px 20px;
  background-color: red;
  color: white;
  border-radius: 5px;
}

SCSS 변환

@mixin box-style($bg-color) {
  padding: 12px 20px;
  background-color: $bg-color;
  color: white;
  border-radius: 5px;
}

.button {
  @include box-style(green);
}
.alert {
  @include box-style(red);
}

이렇게 믹스인을 사용하면 코드 중복을 줄이고 유지보수가 쉬워진다.

📊 SCSS의 장단점 정리

✅ 장점

코드의 재사용성이 좋다
코드의 가독성이 높다
유지보수가 쉬워진다

❌ 단점

기존 CSS보다 추가 학습이 필요하다
SCSS를 CSS로 컴파일하는 과정이 존재해 조금 더 느리다

🎱 마무리

SCSS는 CSS의 단점을 보완하며, 규모가 커질수록 더욱 강력한 힘을 발휘하는 스타일링 도구이다.

이번 글에서는 다음과 같은 주제를 정리하였다

변수: 반복값 정의 및 테마 구성 용이
중첩: 구조 기반의 명확한 코드 작성
믹스인: 재사용 가능한 스타일 블록 정의