7. 내장 함수 (Built-in Functions)

버튼을 마우스로 호버했을 때 조금 더 어두운 색으로 만들고 싶다면? 포토샵을 열어 헥스 코드(Hex)를 찾을 필요가 없습니다.

SCSS는 자체적으로 수학 계산과 색상 조작을 위한 강력한 내장 함수(Built-in Functions)를 제공합니다. darken(), lighten(), rgba() 등의 함수를 활용하면 단일 메인 컬러 변수 하나만으로도 수십 가지의 파생 컬러 시스템을 자동으로 구축할 수 있습니다.

<div class="btn-group">
  <button class="btn-color">기본 상태</button>
  <button class="btn-color hover-sim">Hover 상태 (15% 어두워짐)</button>
  <button class="btn-color active-sim">Active 상태 (20% 더 어두워짐)</button>
</div>

/* SCSS 내장 함수 예시 */
/*
$theme-color: #38bdf8; // 밝은 하늘색

.btn-color {
  background-color: $theme-color;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  
  &:hover {
    // 기존 색상에서 15% 어둡게 만듭니다.
    background-color: darken($theme-color, 15%);
  }
  
  &:active {
    background-color: darken($theme-color, 25%);
  }
}

// 브라우저 결과를 보여주기 위한 시뮬레이션 클래스
.hover-sim {
  background-color: darken($theme-color, 15%);
}
.active-sim {
  background-color: darken($theme-color, 25%);
}
*/

/* 컴파일된 실제 CSS */
.btn-group {
  display: flex; gap: 10px; padding: 20px;
}
.btn-color {
  background-color: #38bdf8;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-color:hover, .hover-sim {
  background-color: #069cdb; /* 어두워진 색상 자동 계산 */
}
.btn-color:active, .active-sim {
  background-color: #046b96; /* 더 어두워진 색상 */
}