핵심 Sass | Variables

Sass의 변수(Variables)는 CSS에서 반복적으로 사용되는 값(색상, 글꼴, 크기 등)을 재사용 가능하도록 저장하는 기능이다.
변수를 사용하면 유지보수성이 좋아지고, 스타일을 일관성 있게 관리할 수 있다.

---

선언 및 사용법

Sass에서 변수는 $ 기호를 사용하여 선언한다.

$변수명: 값;

예제: 색상 변수 사용하기

$primary-color: #3498db;
$secondary-color: #2ecc71;

body {
  background-color: $primary-color;
  color: white;
}

button {
  background-color: $secondary-color;
  border: none;
  padding: 10px;
}

• $primary-color와 $secondary-color를 사용하면 스타일을 쉽게 변경할 수 있음

---

데이터 타입

Sass 변수는 다양한 데이터 타입을 가질 수 있다.

타입	예제
숫자	$width: 100px;
색상	$color: #ff5733;
문자열	$font: "Arial", sans-serif;
불리언	$is-dark-mode: true;
리스트	$margins: 10px 15px 20px;
맵(Map)	$theme-colors: ("primary": #3498db, "danger": #e74c3c);

예제: 리스트와 맵 사용하기

// 리스트
$spacing-sizes: 10px, 20px, 30px;

.box {
  margin: nth($spacing-sizes, 2); // 20px
}

// 맵(Map)
$theme-colors: (
  "primary": #3498db,
  "secondary": #2ecc71
);

button {
  background-color: map-get($theme-colors, "primary");
}

• nth() 함수로 리스트에서 값을 가져오고, map-get()으로 맵에서 값을 찾을 수 있음

---

범위(Scope)

Sass 변수는 전역(Global)과 지역(Local) 범위를 가질 수 있다.

예제: 지역 변수와 전역 변수

$global-color: red; // 전역 변수

.container {
  $local-color: blue; // 지역 변수
  color: $local-color; // ✅ 정상 작동
}

p {
  color: $global-color; // ✅ 정상 작동
  // color: $local-color; ❌ 오류 발생 (범위를 벗어남)
}

• 전역 변수는 어디서든 사용 가능하지만, 지역 변수는 선언된 블록 안에서만 사용 가능

---

변수의 재할당과 !default

변수는 다른 값으로 재할당할 수 있다.
하지만, !default를 사용하면 값이 이미 설정되지 않은 경우에만 적용된다.

예제: 변수 재할당과 !default

$primary-color: blue; // 기본 값

$primary-color: red; // 새로운 값으로 변경

$secondary-color: green !default; // 값이 설정되지 않았으므로 적용됨

$secondary-color: orange !default; // 이미 설정되어 있으므로 변경되지 않음

button {
  background-color: $primary-color; // red
  border-color: $secondary-color; // green
}

• !default를 사용하면 기본 값을 제공하면서도 필요할 경우 다른 값으로 덮어쓸 수 있음

---

CSS 변수(--variable)와 Sass 변수($variable)의 차이

비교 항목	Sass 변수 ($var)	CSS 변수 (--var)
선언 위치	SCSS에서만 사용 가능	CSS에서 직접 사용 가능
값 변경 가능 여부	컴파일 후 변경 불가능	런타임에서 변경 가능 (JavaScript 활용 가능)
사용 가능 환경	SCSS 파일에서만 가능	모든 CSS에서 사용 가능
계산 가능 여부	컴파일 시 계산됨	브라우저에서 실시간 계산 가능

예제: CSS 변수 vs. Sass 변수

// Sass 변수
$primary-color: #3498db;

body {
  background-color: $primary-color; // Sass 변수를 사용
}

/* CSS 변수 */
:root {
  --primary-color: #3498db;
}

body {
  background-color: var(--primary-color); /* CSS 변수를 사용 */
}

• Sass 변수는 컴파일 후 고정, CSS 변수는 실시간 변경 가능(JavaScript로 변경 가능)

---

정리

• Sass 변수($variable)를 사용하면 코드 재사용성과 유지보수성이 향상됨
• 색상, 폰트, 크기 등의 값을 변수로 저장하여 프로젝트 스타일을 일관되게 유지
• 최신 CSS에서는 CSS 변수(--variable)와 함께 사용하여 유연성을 극대화할 수도 있음