웹사이트의 브랜드 컬러를 변경해야 한다고 상상해보세요. 기존 CSS에서는 #3b82f6 색상을 사용한 500군데를 모두 찾아 일일이 수정해야 합니다.
SCSS에서는 $ 기호를 사용하여 색상, 폰트 사이즈, 여백 등을 변수로 저장할 수 있습니다. 변수 값 하나만 수정하면 사이트 전체의 스타일이 한 번에 변경됩니다!
| 변수 타입 | SCSS 코드 예시 |
|---|---|
| 색상 (Colors) | $primary: #ff0000;, $bg-color: rgba(0,0,0,0.5); |
| 폰트 (Typography) | $font-stack: 'Pretendard', sans-serif;, $h1-size: 2rem; |
| 크기/단위 (Sizes) | $container-width: 1200px;, $border-radius: 8px; |
<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;
}