Sass 입문 가이드

그리고 왜 Sass인가

CSS는 꾸준히 진화하고 있습니다. 가장 큰 진전 중 하나가 CSS 변수입니다. 그래도 번거로운 작업은 여전히 남아 있죠. 비슷한 스타일을 여러 번 써야 하는 상황을 떠올려 보세요. 특수 클래스를 만들어도 순수 CSS만으로는 스타일을 공유·합성·재사용할 마땅한 방법이 없고, 수많은 파일에 걸쳐 값을 한꺼번에 바꾸기도 쉽지 않습니다.

Sass(Syntactically Awesome Style Sheets)는 이런 부족함을 채워 주는 성숙한 CSS 전처리기입니다. CSS의 상위 집합인 SCSS 문법으로 작성하며, 변수·믹스인·함수·중첩·파셜·모듈 시스템을 모두 제공합니다. 한 곳의 값을 바꾸면 전체 컴파일된 CSS에 그대로 반영됩니다. 이 글에서는 Sass 설치 방법과 초보자가 익혀야 할 핵심 기능들을 차례로 살펴봅니다.

설치

미리 알려드립니다 — 이 글은 2018년에 처음 작성되었습니다. 당시에는 gem install sass(Ruby Sass)가 표준 설치 방식이었습니다. 하지만 Ruby Sass는 2019년 3월 26일부로 공식적으로 지원이 종료되었고, 더 이상 유지보수되지 않습니다. 현재 공식 구현은 Dart Sass이며, npm 또는 독립 실행 바이너리로 설치합니다. 아래 최신 방법을 참고해 주세요.

npm으로 Dart Sass 설치하기 (권장)

프로젝트에 이미 Node.js를 사용하고 있다면, 개발 의존성으로 Sass를 설치합니다.

npm install --save-dev sass

또는 Yarn:

yarn add --dev sass

그리고 package.json에 SCSS를 CSS로 컴파일하는 스크립트를 추가합니다.

"scripts": {
  "sass": "sass --watch src/style.scss:dist/style.css"
}

npm run sass로 실행하면 Sass가 입력 파일을 감시하다가 변경 시 자동으로 다시 컴파일합니다.

독립 실행 바이너리로 설치하기

Node.js를 쓰기 싫다면 Dart Sass 릴리스 페이지에서 미리 빌드된 바이너리를 받아 PATH에 등록하면 터미널에서 sass 명령을 바로 사용할 수 있습니다. macOS에서는 Homebrew로 brew install sass/sass/sass 명령 한 줄이면 끝입니다.

버전 확인 (현재 Sass 버전을 출력):

sass --version

전처리

시작하기

이번 튜토리얼에는 두 개의 스타일시트가 필요합니다 — style.css와 style.scss. 둘 다 app 폴더 안에 둡니다. 다음 명령을 실행합니다.

sass --watch app/style.scss:app/style.css

sass 명령은 Sass를 CSS로 컴파일합니다. 위 명령에서는 입력(app/style.scss)이 출력(app/style.css)으로 컴파일되고, Sass가 입력 파일을 감시하다가 변경 시 자동으로 다시 컴파일합니다. 대부분의 프로젝트는 CSS와 함께 소스 맵(app/style.css.map)도 함께 생성해, 브라우저 개발자 도구에서 컴파일된 규칙을 원본 SCSS 위치로 역추적할 수 있게 합니다.

예제

변수

Sass에서는 값을 변수($)에 저장하고 스타일시트 전반에 재사용할 수 있습니다.

위 코드는 다음과 같이 컴파일됩니다.

믹스인

믹스인은 제가 가장 좋아하는 Sass 기능 중 하나입니다. 속성마다 벤더 프리픽스를 일일이 작성하는 것은 번거롭지만, @mixin을 사용하면 한 번 작성해 어디서든 재사용할 수 있습니다. opacity를 예로 들어보겠습니다.

$로 값을 전달해 믹스인을 유연하게 만들 수 있습니다.

위 코드는 다음과 같이 컴파일됩니다.

함수

Sass에서는 @function을 사용할 수 있습니다. 아래 예시에서는 px를 rem으로 (또는 그 반대로) 변환합니다. Sass에서는 +, -, *, % 같은 연산자도 함께 사용할 수 있습니다. (참고: 최신 Dart Sass에서는 숫자 나눗셈용 /가 내장 sass:math 모듈의 math.div() 함수로 대체되었습니다 — / 자체는 font: 16px/1.5 같은 CSS shorthand 용도로 예약되어 있기 때문입니다.)

원본 글에서는 아주 구형 IE에 대비해 px/rem 폴백을 함께 다뤘지만, 2026년 시점에는 그럴 필요가 없습니다 — 현재 사용되는 모든 브라우저(지원이 끝난 IE 11 포함)가 rem을 지원하므로, 아래 폴백 스니펫은 참고용 역사 자료로 봐주시면 됩니다.

위 코드는 다음과 같이 컴파일됩니다.

중첩

Sass에서는 HTML처럼 CSS 규칙을 중첩할 수 있어 시각적 계층이 더 분명해집니다 — 더 읽기 쉽고, 정리되어 있으며, 명확합니다.

위 코드는 다음과 같이 컴파일됩니다.

최신 Sass: @use와 @forward

2026년 시점에 Sass를 처음 배우신다면 한 가지 더 짚고 넘어가야 할 포인트가 있습니다 — 과거에 널리 쓰이던 @import 규칙이 단계적으로 폐기되고 있다는 점입니다. 최신 Dart Sass는 두 개의 규칙으로 구성된 정식 모듈 시스템을 사용합니다.

• @use — 다른 Sass 파일을 네임스페이스 모듈로 불러옵니다. @import와 달리, 불러온 파일의 변수와 믹스인이 전역 스코프에 유출되지 않고 namespace.$변수 또는 namespace.믹스인이름()처럼 네임스페이스로 접근합니다.
• @forward — 다른 모듈의 멤버를 재수출합니다. 파셜들을 한 폴더에 모으고 깔끔한 "엔트리 포인트" 파일(관례적으로 _index.scss)을 만들 때 사용합니다.

일반적인 구조는 다음과 같습니다.

// _colors.scss (파일명이 _로 시작하는 "파셜")
$primary: #ff5722;
$text: #222;

// style.scss
@use 'colors';

body {
  color: colors.$text;
  background: colors.$primary;
}

아직은 @import를 사용하는 튜토리얼도 많지만, 점차 제거될 예정이므로 새 프로젝트라면 처음부터 @use / @forward를 사용하시는 편이 좋습니다.

마치며

이 짧은 Sass / SCSS 튜토리얼이 도움이 되었기를 바랍니다. Sass는 CSS의 유지보수성을 높이고 가독성을 개선하며 번거로운 작업을 줄여줍니다 — 변수, 믹스인, 함수, 중첩, 그리고 @use/@forward 모듈 시스템은 매일 손이 가게 되는 핵심 기능들입니다. 제 GitHub 저장소에서 이 포트폴리오에 Sass를 어떻게 사용했는지 확인할 수 있습니다. 연락은 LinkedIn이나 ghsspower@gmail.com으로 부탁드립니다. 감사합니다!