Sass(Syntactically Awesome Stylesheets)는 CSS의 확장(Superset)으로, 스타일 시트를 더 효율적으로 작성할 수 있도록 도와주는 CSS 전처리기(Preprocessor) 중 하나이다. CSS보다 더 강력한 기능(변수, 중첩, 믹스인, 함수 등)을 제공하며, 이를 통해 유지보수성과 재사용성을 높일 수 있다.
주요 기능
변수 (Variables)
CSS에는 변수 기능이 없지만, Sass에서는 $ 기호를 사용해 변수를 정의할 수 있다.
$primary-color: #3498db;
body {
background-color: $primary-color;
}중첩 (Nesting)
Sass는 CSS 선택자를 중첩할 수 있어 구조를 더 직관적으로 만들 수 있다.
.navbar {
background-color: #333;
ul {
list-style: none;
li {
display: inline-block;
a {
color: white;
text-decoration: none;
}
}
}
}장점: CSS의 계층 구조를 그대로 유지하면서 코드가 간결해진다.
믹스인 (Mixins)
반복적인 스타일을 재사용할 수 있도록 도와주는 기능이다.
@mixin button-style($bg-color) {
background-color: $bg-color;
color: white;
padding: 10px 15px;
border-radius: 5px;
}
.btn-primary {
@include button-style(#3498db);
}
.btn-danger {
@include button-style(#e74c3c);
}상속 (Extends)
공통 스타일을 여러 요소에서 재사용할 수 있다.
%box {
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
}
.card {
@extend %box;
background-color: white;
}
.alert {
@extend %box;
background-color: red;
color: white;
}연산 (Operations)
Sass에서는 수학 연산을 활용하여 동적으로 스타일을 적용할 수 있다.
.container {
width: 100% - 20px;
}
.box {
width: 50px + 50px; // 100px
}문법 종류
Sass는 두 가지 문법을 지원한다.
SCSS(Sassy CSS)
.scss확장자 사용- 기존 CSS 문법과 유사하여 배우기 쉬움
{}와;사용
$color: blue;
.box {
background-color: $color;
}Indented Syntax
.sass확장자 사용- 중괄호
{}와 세미콜론;없이 들여쓰기로 구조를 표현
코드가 더 간결하지만 SCSS보다 적응이 필요함
$color: blue
.box
background-color: $color대부분의 프로젝트에서는 SCSS 문법을 선호한다.
Sass vs. CSS 변수
| 비교 항목 | Sass 변수 ($var) | CSS 변수 (--var) |
|---|---|---|
| 범위 | 컴파일 시 변환됨 | 런타임에서 동적으로 변경 가능 |
| 사용 가능 환경 | Sass에서만 사용 가능 | 모든 CSS에서 사용 가능 |
| 계산 가능 여부 | 컴파일 시 연산됨 | CSS 내에서 실시간 계산 가능 |
| 테마 변경 | 어려움 | JavaScript와 함께 사용하면 쉽게 변경 가능 |
최신 프로젝트에서는 CSS 변수를 선호하지만, 복잡한 스타일링 로직이 필요할 경우 Sass를 활용하는 것이 유리하다.
장점과 단점
장점
- 코드 재사용성 증가(변수, 믹스인, 상속 등)
- 유지보수 용이
- 중첩 기능으로 코드 가독성 향상
- CSS보다 더 강력한 기능 제공
단점
- CSS로 컴파일해야 하는 번거로움
- 런타임에서 변수 변경이 불가능
- 최신 CSS 기능(예: CSS 변수)이 대체할 수 있음
팁
- SCSS 스타일 가이드라인을 정하자: 중첩을 너무 깊게 사용하지 않기
- 모듈화하여 파일을 관리하자:
@import또는@use활용 - CSS 변수와 함께 사용해 유연성을 높이자
정리
Sass는 CSS의 생산성을 높이는 강력한 도구로, 변수, 믹스인, 상속, 중첩 등 다양한 기능을 제공하여 유지보수성과 가독성을 향상시킨다.
다만 최신 CSS 기능이 강력해지면서 Sass의 필요성이 줄어들고 있다. 그럼에도 여전히 대규모 프로젝트에서 효율적인 스타일링을 위해 많이 사용된다.
Turning Vision into Reality.