SCSS 변수 완벽 가이드: 입문자도 쉽게 이해하는 활용 팁

웹 퍼블리싱이나 프론트엔드 개발을 시작하면 가장 많이 접하게 되는 스타일링 언어가 CSS입니다.
하지만 CSS만으로는 코드가 길어지고 유지보수가 어려워지는 문제가 생깁니다.
이때 등장하는 것이 바로 SCSS입니다.
특히 SCSS의 변수(Variables) 기능은 스타일 작업 효율성을 크게 높여줍니다.
이 글에서는 SCSS 변수가 무엇인지, 그리고 실무에서 어떻게 활용되는지를 입문자도 쉽게 따라 할 수 있도록 단계별로 설명하겠습니다.

---

1. SCSS 변수란 무엇인가?

SCSS 변수는 CSS 속성 값을 변수로 저장해두고, 반복해서 사용할 수 있게 해주는 기능입니다.
프로그래밍 언어의 변수와 비슷한 개념으로, 색상, 폰트, 크기 등 변경 가능성이 높은 값들을 관리할 때 특히 유용합니다.
예를 들어, 메인 색상을 변수로 선언해두면 나중에 색상을 변경할 때 변수 값만 수정하면 전체 스타일이 한 번에 업데이트됩니다.
 

 

2. SCSS 변수 기본 문법

SCSS 변수는 $ 기호로 선언하며, 아래와 같은 기본 형태를 가집니다.

$변수명: 값;

 
예시:

$main-color: #3498db;
$font-size-base: 16px;

 
 
그리고 선언된 변수를 스타일에서 아래처럼 불러올 수 있습니다.

body {
  color: $main-color;
  font-size: $font-size-base;
}

 
TIP:

• 변수명은 카멜 케이스(camelCase) 또는 **케밥 케이스(kebab-case)**로 작성하면 가독성이 높습니다.
• 변수명만 보고도 어떤 역할을 하는지 알 수 있도록 의미 있는 이름을 사용하세요.

3. 실무에서 자주 쓰는 SCSS 변수 예제

(1) 색상 관리

웹사이트의 메인 색상, 보조 색상, 텍스트 색상 등은 변수로 지정해두면 편리합니다.

$primary-color: #ff6f61;
$secondary-color: #4CAF50;
$text-color: #333;

 

(2) 폰트와 크기

폰트와 크기도 한 곳에서 통합 관리 가능.

$font-family-base: 'Noto Sans KR', sans-serif;
$font-size-large: 20px;
$font-size-small: 12px;

 
(3) 반응형 디자인용 Breakpoint

$breakpoint-mobile: 480px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1200px;

4. 유지보수를 쉽게 만드는 변수 관리 팁

1. 주제별로 변수 파일 분리
   • colors.scss, fonts.scss처럼 파일 단위로 관리하면 협업이 편리해집니다.
2. 변수 네이밍 컨벤션 통일
   • $color-primary, $color-secondary처럼 네이밍 규칙을 팀원과 합의하세요.
3. 사용하지 않는 변수 정리
   • 프로젝트가 커질수록 사용하지 않는 변수가 쌓입니다. 정기적으로 정리해두면 코드가 깔끔해집니다.

---

5. 다음 글 예고: SCSS Mixin

SCSS의 진정한 강점은 변수뿐만 아니라 Mixin 기능과의 조합입니다.
다음 글에서는 SCSS Mixin을 사용해 코드 재사용성을 극대화하는 방법을 다룰 예정이니 기대해주세요!

 
함께 보면 좋은 글

• SCSS 설치 가이드: 처음부터 쉽게 배우기
• 나트랑 여행 준비 체크리스트
• 겨울철 전기요금 절약하는 생활 꿀팁 6가지