[SCSS] SCSS 컬러 함수와 연산자

SCSS 컬러 함수

SCSS는 CSS의 기능을 확장한 스타일 시트 언어로, 컬러 관련 작업을 보다 효율적으로 처리할 수 있는 다양한 함수를 제공합니다.

• lighten($color, $amount): 지정된 색상을 밝게 만듭니다.
• darken($color, $amount): 지정된 색상을 어둡게 만듭니다.
• saturate($color, $amount): 지정된 색상의 채도를 높입니다.
• desaturate($color, $amount): 지정된 색상의 채도를 낮춥니다.
• complement($color): 지정된 색상의 보색을 반환합니다.

---

SCSS 연산자

SCSS는 연산자를 사용하여 숫자와 색상을 계산하고 조작할 수 있습니다.

• +: 숫자나 색상을 더합니다.
• -: 숫자나 색상을 뺍니다.
• *: 숫자를 곱하거나, 색상을 어둡게 만듭니다.
• /: 숫자를 나눕니다.
• %: 숫자를 나눈 나머지를 반환합니다.

---

컬러 함수와 연산자 예제

아래는 SCSS에서 컬러 함수와 연산자를 사용하는 예제입니다.

$base-color: #3498db;

.lighter-color: lighten($base-color, 20%);
.darker-color: darken($base-color, 10%);
.saturated-color: saturate($base-color, 30%);
.desaturated-color: desaturate($base-color, 15%);
.complementary-color: complement($base-color);

.calculated-color: $base-color + #123456;

이렇게 SCSS의 컬러 함수와 연산자를 사용하여 색상을 조작하고 계산할 수 있습니다.