Sass ฟังก์ชันสี

Sass ฟังก์ชันสี

เราจะแบ่งฟังก์ชันสีใน Sass เป็นสามส่วน: ฟังก์ชันตั้งค่าสี, ฟังก์ชันดึงสี และ ฟังก์ชันปฏิบัติการสี

ฟังก์ชันการตั้งค่าสี Sass

ฟังก์ชันปฏิบัติการสี Sass ฟังก์ชัน
rgb(สีแดง, สีเขียว, สีน้ำเงิน)

ตั้งค่าสีด้วยโมเดล Red-Green-Blue (RGB)
กำหนดค่าสี RGB ผ่าน rgb(red, green, blue)
แต่ละตัวแปรนิยายความรุนแรงของสี ซึ่งอาจเป็นตัวเลขเต็มในระหว่าง 0 ถึง 255 หรืออาจเป็นอัตราส่วนเปอร์เซ็นต์ (จาก 0% ถึง 100%)

ตัวอย่าง：

rgb(0, 0, 255);
// แสดงเป็นสีสีน้ำเงิน เพราะค่าตัวแปร blue ถูกตั้งเป็นค่าสูงสุด (255) และค่าตัวแปรอื่น ๆ ถูกตั้งเป็น 0
rgba(สีแดง, สีเขียว, สีน้ำเงิน, alpha)

ตั้งค่าสีด้วยโมเดล Red-Green-Blue-Alpha (RGBA)
ค่าสี RGBA คือค่าของ RGB ที่มี alpha ช่อง - ช่องนี้กำหนดความโปร่งใสของสี
alpha ตัวเลขที่ใช้เป็นพาหะอยู่ในระดับ 0.0 (สะพายแต่ไม่ชัด) ถึง 1.0 (ไม่สะพายแต่ชัด) โดยมาตราฐานคือ 1.0

ตัวอย่าง：

rgba(0, 0, 255, 0.3); // สีสีน้ำเงินที่มีความโปร่งใส
hsl(สีสัน, ความชื้น, ความสว่าง)

ตั้งค่าสีด้วยโมเดล Hue-Saturation-Lightness - และแสดงเป็นเส้นทางหอกสีของสี
Hue (ทองทอย) คือระยะเวลาบนวงแหวนสี ที่อยู่ในระดับ 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 (ไม่สะพายแต่ชัด) โดยมาตราฐานคือ 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, สร้างสีที่ผสมของสี 1 และสี 2)

ตั้งค่าสีที่เป็นเหติตหรือเนยสี
สร้างสีที่ผสมของสี 1 และสี 2ตัวเลขที่ใช้เป็นพาหะเป็นตัวเลือก ต้องอยู่ในระดับ 0% ถึง 100% โดยมาตราฐานคือ 100%

ตัวอย่าง：

invert(white);

ผลลัพธ์: black

ฟังก์ชันเลือกสี Sass

ฟังก์ชันปฏิบัติการสี Sass ฟังก์ชัน
red(color)

ดังนั้นค่าแดงของสีด้วยตัวเลขในระดับ 0 ถึง 255

ตัวอย่าง：

red(#7fffd4);

ผลลัพธ์: 127

red(red);

blue(blue);
green(color)

ดังนั้นค่าเขียวของสีด้วยตัวเลขในระดับ 0 ถึง 255

ตัวอย่าง：

green(#7fffd4);

blue(blue);

green(blue);

green(blue);
ผลลัพธ์：0color)

blue(

ตัวอย่าง：

คืนค่าสีน้ำเงินของสีด้วยตัวเลขที่อยู่ระหว่าง 0 ถึง 255

blue(#7fffd4);

ผลลัพธ์：212

blue(blue);
ผลลัพธ์：255color)

hue(

ตัวอย่าง：

คืนค่าสีสันของสีด้วยตัวเลขที่อยู่ระหว่าง 0deg ถึง 360deg

hue(#7fffd4);
ผลลัพธ์：160degcolor)

saturation(

ตัวอย่าง：

คืนค่าความชื้นของสีด้วยตัวเลขที่อยู่ระหว่าง 0% ถึง 100%

saturation(#7fffd4);
ผลลัพธ์：100%color)

lightness(

ตัวอย่าง：

คืนค่าความสว่างของสีด้วยตัวเลขที่อยู่ระหว่าง 0% ถึง 100%

lightness(#7fffd4);
ผลลัพธ์: 74.9%color)

opacity(

ตัวอย่าง：

alpha(

alpha(#7fffd4);
ผลลัพธ์: 1color)

opacity(

ตัวอย่าง：

คืนค่าช่อง alpha ของสีด้วยตัวเลขที่อยู่ระหว่าง 0 ถึง 1

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

ผลลัพธ์: 0.5

ฟังก์ชันปฏิบัติการสี Sass ฟังก์ชัน
การอธิบายและตัวอย่างน้ำหนักที่สูงกว่าหมายถึงการใช้มากขึ้นของ, color2, สร้างสีที่ผสมของสี 1 และสี 2)

mix(
สร้างสีที่ผสมของสี 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%);

ผลลัพธ์: rgba(127, 255, 212, 0.3)
lighten(color, amount) สร้างสีที่มีความอ่อนขึ้นด้วยปริมาณที่อยู่ระหว่าง 0% และ 100%
amount ปรับระดับความสว่างของ HSL ขึ้นตามร้อยละ
darken(color, amount) สร้างสีที่มีความลึกลงด้วยปริมาณที่อยู่ระหว่าง 0% ถึง 100%
amount ปรับระดับความสว่างของ HSL ลงตามร้อยละ
saturate(color, amount) สร้างสีที่มีความเข้มของสีสูงขึ้นด้วยปริมาณที่อยู่ระหว่าง 0% และ 100%
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 ตามค่าของตนเอง