1. SCSS/Sass의 필요성

웹 프로젝트가 커지면서 기존 CSS만으로는 코드가 수천 줄로 늘어나고 관리가 불가능해지는 문제(유지보수 지옥)가 발생했습니다.

이러한 불편함을 해소하기 위해 등장한 것이 바로 CSS 전처리기(Preprocessor)인 SCSS(Sassy CSS)입니다. SCSS는 변수, 중첩, 반복문, 함수 등 프로그래밍 언어의 특징을 CSS에 도입하여 코드를 획기적으로 줄이고 재사용성을 극대화합니다.

브라우저는 오직 순수 CSS만 해석할 수 있습니다. 따라서 SCSS로 작성된 코드는 반드시 컴파일(Compile) 과정을 거쳐 일반 CSS 파일로 변환되어야 합니다.

<!-- SCSS는 개발 환경에서만 작성되고, 브라우저에는 컴파일된 CSS가 적용됩니다. -->
<div class="card">
  <h2>SCSS 컴파일 결과 확인</h2>
  <button class="btn primary">확인</button>
  <button class="btn danger">취소</button>
</div>

/* 아래 코드는 SCSS가 일반 CSS로 컴파일된 결과입니다. */
.card {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}
.card h2 {
  color: #333;
}
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}
.btn.primary {
  background-color: #007bff;
  color: white;
}
.btn.danger {
  background-color: #dc3545;
  color: white;
}