✅ CSS 전처리기(SASS, LESS)를 사용하는 이유와 장단점은?

✅ CSS 전처리기(SASS, LESS)를 사용하는 이유와 장단점은?

CSS만으로도 스타일링은 가능하지만, 유지보수성, 가독성, 재사용성이 중요한 규모에서는 한계가 존재합니다.
이러한 문제를 해결하기 위해 등장한 도구가 바로 **CSS 전처리기(Preprocessor)**입니다.
이번 글에서는 특히 **SASS(SCSS)**와 LESS를 중심으로 왜 쓰는지, 언제 쓰는지, 실무에서 어떤 문제를 해결해주는지를 정리합니다.

---

📌 1. CSS 전처리기란?

CSS 전처리기는 변수, 함수, 중첩(Nesting), 조건문 등 프로그래밍 개념을 CSS에 도입한 확장 문법입니다.
컴파일 과정을 거쳐 일반 CSS 파일로 변환되며, 복잡한 스타일링 구조를 단순화하는 데 유리합니다.

대표적인 전처리기:

이름 확장자 특징

SASS(SCSS)	.scss, .sass	가장 보편적, 문법 유연
LESS	.less	JS와 친화적, Bootstrap 3 사용
Stylus	.styl	매우 자유로운 문법 (비추천 추세)

---

📌 2. SASS(SCSS) 주요 기능

✅ 1) 변수 선언

$main-color: #3498db;

.button {
  background-color: $main-color;
}

✅ 2) 중첩(Nesting)

.nav {
  ul {
    li {
      a {
        color: white;
      }
    }
  }
}

✅ 3) 믹스인(Mixin)

반응형

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

.box {
  @include flex-center;
}

✅ 4) 상속(@extend)

%card {
  border: 1px solid #ccc;
  padding: 10px;
}

.profile-card {
  @extend %card;
}

✅ 5) 연산

.container {
  width: 100% / 3;
}

---

📌 3. CSS 전처리기의 장점

장점 설명

변수 관리	컬러, 폰트, 간격 등을 변수로 선언하여 일관성 유지
중첩 구조	컴포넌트 기반의 구조적 스타일 정의 가능
모듈화	@import 또는 @use를 통한 파일 분리
재사용성	Mixin, 함수 등 재사용 로직 적용
유지보수성	스타일 구조와 관계를 명확히 표현 가능

---

📌 4. 단점 및 주의사항

단점 설명

컴파일 필요	브라우저가 바로 인식하지 못해 빌드 과정 필요
진입 장벽	JS만 쓰던 개발자에게 문법이 다소 생소할 수 있음
중첩 과용	깊은 중첩 사용 시 오히려 가독성 저하 발생
실행 성능과 무관	런타임 성능에는 직접적 영향 없음 (개발 생산성 도구)

---

📌 5. 실무에서의 경험: 컴포넌트 스타일 분리

🧪 문제 상황

스타일 파일이 점점 커지며, 클래스 이름이 겹치고 수정 시 어디서 영향을 주는지 파악이 어려움

✅ 해결 전략

• SCSS로 전환하여 컴포넌트 단위로 style 파일을 분리
• 변수, 믹스인으로 중복 제거
• 구조적으로 중첩하여 CSS 구조의 계층을 표현

// components/_button.scss
$btn-radius: 4px;

.button {
  border-radius: $btn-radius;
  &:hover {
    background-color: lighten($main-color, 10%);
  }
}

코드 재사용성과 유지보수성이 높아졌고, 신규 디자이너도 빠르게 스타일 구조를 파악할 수 있었음

---

📌 6. SASS vs LESS vs CSS-in-JS?

기준 SASS LESS CSS-in-JS

학습 난이도	중	낮음	높음 (JS 필요)
사용 환경	범용	Bootstrap 등	React 생태계 중심
동적 스타일	제한적	제한적	가능 (props 기반)
유지보수	우수	보통	우수 (컴포넌트와 결합)
사용 예시	SCSS, Vue, Angular	Bootstrap 3	styled-components, Emotion 등

현재는 SASS + BEM 또는 **CSS-in-JS (styled-components 등)**으로 많이 전환되고 있는 추세

---

📌 면접 시 이렇게 답하세요

CSS 전처리기는 반복되는 스타일을 구조화하고 변수, 믹스인, 중첩 등을 활용해 코드를 더 읽기 쉽고, 재사용 가능하게 만들어주는 도구입니다.
특히 규모가 커질수록 CSS 구조가 복잡해지기 때문에, 유지보수성과 협업 측면에서 매우 유용합니다.
실무에서는 SASS 기반 SCSS 문법을 가장 많이 사용했고, 컴포넌트 단위로 스타일을 분리하여 재사용성과 일관성을 높였습니다.

---

CSS,SASS,SCSS,LESS,CSS전처리기,스타일관리,컴포넌트스타일링,프론트엔드면접,코드재사용,면접대비