Sass 색상 함수

Sass 색상 함수

Sass의 색상 함수는 세 부분으로 나누어집니다: 색상 설정 함수, 색상 가져오기 함수, 색상 처리 함수:

Sass 색상 함수 설정

함수 설명 및 예제
rgb(빨강, 녹색, 파랑)

Red-Green-Blue (RGB) 모델을 사용하여 색상을 설정합니다.
rgb(red, green, blue)를 통해 RGB 색상 값을 지정합니다.
각 매개변수는 그 색의 강도를 정의하며, 0에서 255 사이의 정수 또는 0%에서 100% 사이의 백분율 값이 될 수 있습니다.

实例：

rgb(0, 0, 255);
// 보라색으로 표시됨, blue 매개변수가 최대 값(255)으로 설정되었고, 다른 매개변수는 0으로 설정됨
rgba(빨강, 녹색, 파랑, alpha)

Red-Green-Blue-Alpha (RGBA) 모델을 사용하여 색상을 설정합니다.
RGBA 색상 값은 alpha 채널을 포함한 RGB 색상 값의 확장입니다 - 이 채널은 색의 불투명도를 지정합니다.
alpha 파라미터는 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자입니다.

实例：

rgba(0, 0, 255, 0.3); // 투명도가 있는 파란색으로 표현됨
hsl(색조, 부유함, 빛나는 정도)

Hue-Saturation-Lightness (HSL) 모델을 사용하여 색상을 설정합니다 - 색의 원형 좌표 표현을 의미합니다.
Hue(색상)은 색环상의 각도(0에서 360)입니다 - 0 또는 360은 빨간색, 120는 녹색, 240는 파란색입니다
Saturation(부饱和도)는 백분율 값입니다; 0%는 회색 그림자, 100%는 전체 색상입니다.
Lightness(밝기)는 백분율입니다; 0%는 검은색, 100%는 흰색입니다.

实例：

hsl(120, 100%, 50%); // 녹색
hsl(120, 100%, 75%); // 연녹색
hsl(120, 100%, 25%); // 진녹색
hsl(120, 60%, 70%); // 연녹색

hsla(색조, 부유함, 빛나는 정도, alpha)

Hue-Saturation-Lightness-Alpha (HSLA) 모델을 사용하여 색상을 설정합니다.
HSLA 색상 값은 HSL 색상 값의 확장으로, alpha 채널을 포함합니다 - 색의 불투명도를 지정합니다.
alpha 파라미터는 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자입니다.

实例：

hsl(120, 100%, 50%, 0.3); // 불투명도가 있는 녹색
hsl(120, 100%, 75%, 0.3); // 불투명도가 있는 연녹색

grayscale(color)

색과 같은 밝기를 가진 회색을 설정합니다.

实例：

grayscale(#7fffd4);

결과: #c6c6c6
complement(color)

색의 상대색을 설정합니다.

实例：

complement(#7fffd4);

결과: #ff7faa
invert(color, weight)

색의 반색 또는 부정색을 설정합니다.
weight파라미터는 선택 사항이며, 0%에서 100% 사이의 숫자여야 합니다. 기본 값은 100%입니다.

实例：

invert(white);

결과: black

Sass 색상 함수

함수 설명 및 예제
red(color)

0에서 255 사이의 숫자로 색의 빨간 값을 반환합니다.

实例：

red(#7fffd4);

결과: 127

red(red);

결과: 255
green(color)

0에서 255 사이의 숫자로 색의緑색 값을 반환합니다.

实例：

green(#7fffd4);

결과: 255

green(blue);

결과: 0
blue(color)

0에서 255 사이의 숫자로 색상의 파란 값을 반환합니다.

实例：

blue(#7fffd4);

결과: 212

blue(blue);

결과: 255
hue(color)

0deg에서 360deg 사이의 숫자로 색상의 톤을 반환합니다.

实例：

hue(#7fffd4);

결과: 160deg
saturation(color)

0%에서 100% 사이의 숫자로 색상의 HSL 부유함을 반환합니다.

实例：

saturation(#7fffd4);

결과: 100%
lightness(color)

0%에서 100% 사이의 숫자로 색상의 HSL 밝기를 반환합니다.

实例：

lightness(#7fffd4);

결과: 74.9%
alpha(color)

0에서 1 사이의 숫자로 색상의 Alpha 채널을 반환합니다.

实例：

alpha(#7fffd4);

결과: 1
opacity(color)

0에서 1 사이의 숫자로 색상의 Alpha 채널을 반환합니다.

实例：

opacity(rgba(127, 255, 212, 0.5));

결과: 0.5

Sass 색상 작업 함수

함수 설명 및 예제
mix(더 큰 가중치는 더 많은, color2, weight)

색상 1과 색상 2의 혼합 색상을 생성합니다.
weight 매개변수는 0%와 100% 사이여야 합니다. 기본 값은 50%입니다.
매개변수를 사용해야 한다는 의미입니다. 더 큰 가중치는 더 많은。
더 작은 가중치는 더 많은 color2。

adjust-hue(color, 도)

색상의 톤을 -360도에서 360도의 각도로 조정합니다.

实例：

adjust-hue(#7fffd4, 80deg);

결과: #8080ff
adjust-color(color, 빨강, 녹색, 파랑, 색조, 부유함, 빛나는 정도, alpha)

지정된 양으로 하나나 많은 매개변수를 조정합니다.
이 함수는 기존 색상 값에 지정된 양을 추가하거나 빼어줍니다.

实例：

adjust-color(#7fffd4, blue: 25);

결과:
change-color(color, 빨강, 녹색, 파랑, 색조, 부유함, 빛나는 정도, alpha)

색상의 하나나 많은 매개변수를 새로운 값으로 설정합니다.

实例：

change-color(#7fffd4, red: 255);

결과: #ffffd4
scale-color(color, 빨강, 녹색, 파랑, 부유함, 빛나는 정도, alpha) 한 개나 많은 색상 매개변수를 확대합니다.
rgba(색상, alpha)

주어진 alpha 채널을 사용하여 새로운 색상을 생성합니다.

实例：

rgba(#7fffd4, 30%);

Result: rgba(127, 255, 212, 0.3)
实例：color, amount) rgba(#7fffd4, 30%);
amount rgba(127, 255, 212, 0.3)
lighten(color, amount) HSL 밝기를 백분율로 증가시킵니다.
amount darken(
HSL 밝기를 백분율로 감소시킵니다.color, amount) saturate(
amount HSL 채도를 백분율로 증가시킵니다.
desaturate(color, amount) 0%과 100% 사이의 값을 사용하여 낮은 채도의 색상을 생성합니다.
amount HSL 채도를 백분율로 감소시킵니다.
opacify(color, amount) 0과 1 사이의 값을 사용하여 더 불투명한 색상을 생성합니다.
amount Alpha 채널 값에 따라 파라미터를 증가시킵니다.
fade-in(color, amount) 0과 1 사이의 값을 사용하여 더 불투명한 색상을 생성합니다.
amount Alpha 채널 값을 값에 따라 감소시킵니다.
transparentize(color, amount) 0과 1 사이의 값을 사용하여 더 투명한 색상을 생성합니다.
amount Alpha 채널 값을 값에 따라 감소시킵니다.
fade-out(color, amount) 0과 1 사이의 값을 사용하여 더 투명한 색상을 생성합니다.
amount Alpha 채널 값에 따라 파라미터를 증가시킵니다.