SCSS란? - by. UXKM

Publishing
SCSS
SCSS 시작
SCSS란?

요약 설명
SCSS(Sassy CSS)는 CSS를 더 편하게 작성하기 위한 CSS 전처리기(Preprocessor) 문법입니다.
브라우저가 직접 읽는 언어는 아니며, 먼저 SCSS → 순수 CSS로 컴파일한 뒤 그 CSS를 브라우저가 해석합니다.

SCSS는 CSS 문법과 거의 같은 형식을 사용하면서도 변수, 중첩, 믹스인, 파셜 등 크고 복잡한 스타일을 관리하기 좋은 기능을 제공합니다.
이 페이지에서는 SCSS의 기본 개념과 Sass와의 관계, 그리고 코드가 어떻게 CSS로 변환되는지를 기초부터 살펴봅니다.

SCSS 문법의 핵심 특징

SCSS 문법의 핵심 특징에는 변수 · 중첩 · 믹스인 · 파셜(Partials) · 모듈 시스템 등이 있습니다. 이 섹션에서는 SCSS를 이해할 때 꼭 알아두면 좋은 이 핵심 문법 기능들을 간단한 예제와 함께 먼저 정리해 보겠습니다.
if, for, each 같은 난이도가 조금 더 높은 제어문 문법은 뒤에서 따로 모아 보다 자세하게 살펴봅니다.

변수(Variables)

색상, 간격, 폰트 크기처럼 여러 곳에서 반복해서 쓰이는 값을 이름이 있는 변수로 저장해 두고 필요할 때마다 불러 쓸 수 있습니다.
예를 들어 브랜드 메인 색상을 변수 하나로 관리하면, 디자인이 바뀌어도 코드 한 곳만 수정해서 전체 스타일을 함께 바꿀 수 있어 유지보수가 훨씬 편해집니다.

								$primary-color: #0a58ca;

								body {
								  color: $primary-color;
								}
								.button-primary {
								  background: $primary-color;
								}

중첩(Nesting)

HTML 구조와 비슷하게 선택자를 안쪽으로 들여쓰기해서 작성하면, 어떤 요소 안에 어떤 스타일이 들어가는지 한눈에 보기 쉽습니다.
특정 컴포넌트(예: .card) 안에서만 사용하는 스타일을 블록 하나로 모아 둘 수 있어서, 다른 영역에 스타일 영향이 퍼지지 않도록 안전하게 관리할 수 있습니다.

								.card {
								  padding: 16px;

								  h3 { font-size: 18px; }
								  p  { margin-top: 8px; }
								  a  { color: #0a58ca; }
								}

믹스인(Mixins)

자주 쓰는 스타일 묶음을 함수처럼 정의해 두고, 필요한 곳에서 @include로 불러와 여러 요소에 쉽게 적용할 수 있습니다.
버튼, 카드, 레이아웃처럼 여러 컴포넌트에서 반복되는 스타일 패턴을 하나의 믹스인으로 만들어 두면, 새로운 요소를 추가할 때도 코드 몇 줄만으로 동일한 규칙을 적용할 수 있습니다.

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

								.button-group {
								  @include flex-center;
								}

파셜(Partials)과 모듈 시스템

공통 스타일을 작은 파일(파셜)로 쪼개 두고, @use, @forward로 필요한 곳에서만 불러오면 큰 프로젝트도 구조적으로 관리할 수 있습니다.
색상, 폰트, 버튼, 카드처럼 역할별로 파일을 나누어 두면 “어디를 고쳐야 할지”를 빨리 찾을 수 있고, 여러 명이 함께 작업할 때도 충돌을 줄일 수 있습니다.

_colors.scss

									$primary: #0a58ca;

main.scss

									@use "colors"; /* _colors.scss 파일에서 정의한 변수·설정을 불러옵니다. */

									.button {
										background: colors.$primary;
									}

이러한 기능 덕분에 SCSS는 코드를 더 짧고 읽기 좋게 만들고, 큰 프로젝트에서도 스타일을 안전하게 유지보수할 수 있도록 도와줍니다.
[1. SCSS 시작]에서는 SCSS의 기초를 확실히 익힐 수 있도록, 변수 · 중첩 · 믹스인 · 파셜(Partials) · 모듈 시스템을 여러 섹션에서 반복해 설명하며 자연스럽게 익히도록 돕습니다.

SCSS와 Sass의 관계

Sass는 CSS를 더 효율적으로 작성하기 위해 만들어진 스타일시트 언어이고,
SCSS는 Sass에서 제공하는 두 가지 문법 형식 중 하나입니다.

Sass(인덴트 문법)

중괄호({})와 세미콜론(;) 대신 들여쓰기(인덴트)로 블록을 구분하는 문법으로, 파일 확장자는 .sass입니다.
다만 들여쓰기 공백 수에 매우 민감해 탭·스페이스가 섞이면 쉽게 에러가 날 수 있고, 팀에서 코드 스타일을 맞추지 않으면 관리가 어려운 편입니다.

								// example.sass
								.button
									padding: 8px 16px
									background: #0a58ca
									color: #fff

SCSS(Sassy CSS)

우리가 익숙한 일반 CSS 문법에 변수, 중첩, 믹스인 등을 추가한 문법으로, 파일 확장자는 .scss입니다.
기존 CSS 코드를 거의 그대로 가져와서, 필요한 부분에만 SCSS 문법을 추가해 사용할 수 있습니다.

								/* example.scss */
								.button {
									padding: 8px 16px;
									background: #0a58ca;
									color: #fff;
								}

정리하면, Sass는 도구 이름이고, SCSS는 Sass 안에서 사용하는 문법 형식이라고 이해하면 됩니다.
실무에서는 CSS와 가장 비슷한 형식인 SCSS 문법을 사용하는 경우가 훨씬 많습니다.

SCSS는 어떻게 시작하나요?

SCSS는 브라우저가 바로 읽을 수 있는 언어가 아니라, 먼저 SCSS → CSS로 변환한 뒤 사용해야 합니다.
즉, .scss 파일을 빌드 도구로 컴파일해 .css 파일을 만들고, 그 결과물을 HTML에서 <link> 태그로 연결해 화면에 적용하게 됩니다.

파일 확장자
SCSS 파일은 보통 style.scss처럼 .scss 확장자를 사용합니다. (기존 CSS 파일은 .css입니다.)
컴파일 결과
style.scss를 컴파일하면 style.css가 생성되고, HTML에서는 이전과 마찬가지로 <link href="style.css" rel="stylesheet" /> 형태로 연결합니다.
어디에서 컴파일하나요?
개발 환경에 따라 여러 가지 방법이 있습니다. 가장 많이 쓰이는 방법은 Gulp나 Webpack 같은 빌드 도구를 이용해 저장할 때마다 자동으로 .scss를 .css로 바꾸는 방식입니다.
VS Code 확장 프로그램(Sass 플러그인 등)을 쓰면 에디터 안에서 바로 컴파일할 수도 있고, sass 명령어(CLI)를 설치해 터미널에서 직접 변환할 수도 있습니다.
이후 Gulp 커리큘럼에서 실제로 SCSS를 컴파일하는 작업을 단계별로 함께 진행해 보겠습니다.

UXKM Gulp 커리큘럼 바로가기 UXKM Gulp > SCSS 컴파일 바로가기
기존 CSS 재사용
이미 가지고 있는 CSS 코드도 .scss 파일로 옮겨 두고, 필요한 부분만 조금씩 변수·믹스인·중첩으로 바꾸면서 점진적으로 SCSS에 익숙해지면 됩니다.

간단한 SCSS → CSS 변환 예시

같은 스타일을 여러 번 반복해서 쓰는 대신, SCSS에서는 변수를 만들어 재사용할 수 있습니다.

							$main-color: #0d6efd;
							$base-padding: 8px;

							.button-primary {
								padding: $base-padding * 2 $base-padding * 3;
								background: $main-color;
								color: #fff;
							}

							.button-primary {
								padding: 16px 24px;
								background: #0d6efd;
								color: #fff;
							}

위 예시처럼 SCSS에서는 $main-color, $base-padding 같은 변수를 사용하지만,
컴파일된 CSS에서는 실제 값만 남고 변수는 사라진 형태로 브라우저에 전달됩니다.