2. 변수 (Variables)

웹사이트의 브랜드 컬러를 변경해야 한다고 상상해보세요. 기존 CSS에서는 #3b82f6 색상을 사용한 500군데를 모두 찾아 일일이 수정해야 합니다.

SCSS에서는 $ 기호를 사용하여 색상, 폰트 사이즈, 여백 등을 변수로 저장할 수 있습니다. 변수 값 하나만 수정하면 사이트 전체의 스타일이 한 번에 변경됩니다!

<div class="profile-card">
  <h2 class="profile-name">홍길동</h2>
  <p class="profile-desc">프론트엔드 개발자</p>
  <button class="profile-btn">팔로우</button>
</div>

/* SCSS 작성 예시 (컴파일 후 모습) */
/* 
$brand-color: #8b5cf6;
$text-color: #1f2937;
$border-radius: 12px; 
*/

.profile-card {
  padding: 20px;
  border-radius: 12px; /* $border-radius */
  border: 2px solid #8b5cf6; /* $brand-color */
  text-align: center;
  max-width: 300px;
}

.profile-name {
  color: #8b5cf6; /* $brand-color */
  margin-bottom: 5px;
}

.profile-desc {
  color: #1f2937; /* $text-color */
}

.profile-btn {
  background-color: #8b5cf6; /* $brand-color */
  color: white;
  border: none;
  border-radius: 12px; /* $border-radius */
  padding: 10px 20px;
  margin-top: 15px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.profile-btn:hover {
  opacity: 0.8;
}