들어가며
CSS는 웹 스타일링의 핵심이지만, 규모가 커지면 복잡한 스타일 관리, 반복되는 속성, 유지보수 어려움 등 여러 가지 한계에 부딪히게 됩니다.
이런 문제를 해결하고 CSS를 더 체계적이고 프로그래밍적으로 사용할 수 있게 만든 도구가 바로 SCSS(SASS)입니다.
이 글에서는 📂 language / css_scss 카테고리의 첫 번째 글로서, SCSS의 개념, 기본 문법, CSS와의 차이점, 실무에서의 이점을 정리해보겠습니다.
SASS와 SCSS는 무엇이 다른가요?
- SASS(Syntactically Awesome Style Sheets): 초기 버전, 들여쓰기 기반 문법
- SCSS(Sassy CSS): CSS 문법을 기반으로 한 SASS의 최신 문법 (현재 가장 널리 사용)
대부분의 현대 프로젝트에서는 .scss 확장자 기반의 SCSS 문법을 사용합니다.
SCSS의 주요 특징
기능설명
| 변수 사용 | 색상, 간격 등을 변수로 관리 가능 ($main-color: #333;) |
| 중첩(Nesting) | CSS 선택자를 중첩해 구조화 가능 |
| 믹스인(Mixin) | 반복되는 스타일을 함수처럼 정의 및 재사용 |
| 상속(Extend) | 공통 스타일을 다른 클래스에 상속 가능 |
| 연산 | 수치 계산 가능 (width: 100% / 3) |
SCSS 문법 예시
$primary-color: #3498db;
.button {
background-color: $primary-color;
color: white;
padding: 10px;
&:hover {
background-color: darken($primary-color, 10%);
}
}이 코드는 컴파일 후 일반 CSS로 변환되어 브라우저에서 사용됩니다.
SCSS vs CSS 비교
| 항목 | CSS | SCSS |
| 변수 지원 | ❌ 없음 | ✅ $변수명으로 가능 |
| 중첩 가능 | ❌ 선택자 반복 필요 | ✅ 구조화 가능 |
| 코드 재사용 | ❌ 제한적 (클래스 복사 등) | ✅ mixin, extend 가능 |
| 유지보수 | 어렵다 | 쉬워진다 (모듈화 용이) |
SCSS를 사용하려면?
SCSS는 브라우저가 직접 이해하지 못하므로, 컴파일 과정이 필요합니다.
보통 다음과 같은 방법으로 SCSS를 CSS로 변환합니다:
- CLI 툴: sass style.scss style.css
- 빌드 도구: Webpack + sass-loader, Vite, Parcel 등
- 프레임워크 통합: Vue, React, Nuxt, Angular 등에서도 SCSS 사용 가능
실무에서 SCSS가 유용한 이유
- 디자인 시스템을 변수와 믹스인으로 관리 가능
- 반응형 속성을 mixin으로 템플릿화 가능
- CSS가 커져도 구조화된 설계로 유지보수 용이
- 전처리기로서 다양한 CSS 함수 제공 (darken, lighten 등)
앞으로 다룰 SCSS 시리즈
📂 language / css_scss 카테고리에서는 다음과 같은 내용을 다룰 예정입니다:
- 변수($), 중첩(&), 믹스인(@mixin), include 정리
- extend와 placeholder 스타일 구성
- 조건문과 반복문 (@if, @for 등) 실전 예시
- SCSS 모듈화 구조 설계 (partials, index.scss)
- sass-loader 환경 구성 (Vite/Webpack)
CSS는 꾸미는 기술, SCSS는 꾸미기를 체계화하는 기술입니다.
규모가 커질수록 더 빛나는 SCSS의 세계로 함께 들어가봅시다!
📌 다음 글 미리보기
👉 변수($), 중첩(&), 믹스인(@mixin), include 정리
📚 SCSS SASS 시리즈 전체 보기
👉 https://jobreview.tistory.com/category/language/css_scss
댓글