ສາຍຫົວ Sass

ສາຍຫົວ Sass

ພວກເຮົາຈະຈຳນວນພາສາ Sass ສູ່ສາມບາງສ່ວນ: ການກຳນົດພາສາສີ, ການການຄົ້ນຫາພາສາສີ, ແລະ ການກຳນົດພາສາສີ

ການກຳນົດພາສາ Sass

ກົນຫວງ ອະທິບາຍ & ເຫດການ
rgb(red, green, blue)

ການກຳນົດສີຜ່ານຮູບຮ່າງ Red-Green-Blue (RGB)
ການກຳນົດຄຸນນະພາບ RGB ຜ່ານ rgb(red, green, blue)
ແຕ່ລະຄູ່ມູນອະທິບາຍຄວາມແຂງຂອງສີ ສາມາດເປັນຈຳນວນທີ່ຢູ່ໃນສະເພາະ 0 ຫາ 255 ຫຼື ສາມາດເປັນຄະແນນສາມາດ (ຈາກ 0% ຫາ 100%)

ຕົວຢ່າງ:

rgb(0, 0, 255);
// ສະແດງດ້ວຍສີຟ້າສີບົວຍາກວ່າ ຄູ່ມູນ blue ຖືກກຳນົດໃຫ້ສູງສຸດ (255) ຄູ່ມູນອື່ນໆຖືກກຳນົດໃຫ້ສູງສຸດ 0
rgba(red, green, blue, alpha)

ການຕັ້ງສີດ້ວຍຮູບຈຳນວນ Red-Green-Blue-Alpha (RGBA).
RGBA ຄູ່ມູນຄ່າສີແມ່ນຂະຫຍາຍຂອງ RGB ຄູ່ມູນຄ່າສີ, ກັບ alpha 通道 - ກຳນົດຄວາມປອດໄພຂອງສີ.
alpha ປະເພດຂອງປະກອບງານແມ່ນຕົວເລກຈາກ 0.0 (ສະເປັກ) ຫາ 1.0 (ບໍ່ສະເປັກ).

ຕົວຢ່າງ:

rgba(0, 0, 255, 0.3); // ສີສີຫຼັງຄວາມປອດໄພ
hsl(hue, saturation, lightness)

ການຕັ້ງສີດ້ວຍຮູບຈຳນວນ Hue-Saturation-Lightness - ແລະສະແດງຄວາມສະຫຼາດຂອງສີດ້ວຍຕາມສາຍສີສີຮູບຮູບ.
Hue (ຄວາມສະຫຼາດ) ແມ່ນຕົວເລກຈາກ 0 ຫາ 360 ໃນສາຍສີສີຮູບຮູບ - 0 ຫຼື 360 ແມ່ນສີສີ, 120 ແມ່ນສີຂຽວ, 240 ແມ່ນສີຂຽວ.
Saturation (ຄວາມສະຫຼາດ) ແມ່ນຕົວເລກຈາກ 0% ຫາ 100%; 0% ແມ່ນສີສີຫຼາຍ, 100% ແມ່ນສີສີທັງໝົດ.
Lightness (ຄວາມສະຫຼາດ) ແມ່ນຕົວເລກຈາກ 0% ຫາ 100%; 0% ແມ່ນສີດຳ, 100% ແມ່ນສີຂຽວ.

ຕົວຢ່າງ:

hsl(120, 100%, 50%); // ສີຂຽວ
hsl(120, 100%, 75%); // ສີຂຽວ
hsl(120, 100%, 25%); // ສີຂຽວຫຼັງຄວາມສະຫຼາດ
hsl(120, 60%, 70%); // ສີຂຽວຫຼັງຄວາມປອດໄພ

hsla(hue, saturation, lightness, 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)

ກັບຄືນສາຍວັດທະນະທຳ HSL ສີຂອງສີດ້ວຍຈຳນວນທີ່ຢູ່ລະດັບ 0deg ຫາ 360deg.

ຕົວຢ່າງ:

hue(#7fffd4);

ຜົນ: 160deg
saturation(color)

ກັບຄືນສາຍວັດທະນະທຳ HSL ຄວາມຫຼຸດຂອງສີດ້ວຍຈຳນວນທີ່ຢູ່ລະດັບ 0% ຫາ 100%.

ຕົວຢ່າງ:

saturation(#7fffd4);

ຜົນ: 100%
lightness(color)

ກັບຄືນສາຍວັດທະນະທຳ HSL 亮度ຂອງສີດ້ວຍຈຳນວນທີ່ຢູ່ລະດັບ 0% ຫາ 100%.

ຕົວຢ່າງ:

lightness(#7fffd4);

ຜົນລັງ: 74.9%
alpha(color)

ກັບຄືນສາຍວັດທະນະທຳ Alpha ຂອງສີດ້ວຍຈຳນວນທີ່ຢູ່ລະດັບ 0 ຫາ 1.

ຕົວຢ່າງ:

alpha(#7fffd4);

ຜົນລັງ: 1
opacity(color)

ກັບຄືນສາຍວັດທະນະທຳ Alpha ຂອງສີດ້ວຍຈຳນວນທີ່ຢູ່ລະດັບ 0 ຫາ 1.

ຕົວຢ່າງ:

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

ຜົນລັງ: 0.5

Sass Operation Color Functions

ກົນຫວງ ອະທິບາຍ & ເຫດການ
mix(color1, color2, weight)

ສ້າງສີປະສົມສີ 1 ແລະ color 2.
weight ປະສົມສະຫຼາກຄວາມນັບສະເພາະຕາມສາຍວັດທະນະທຳ color1 ແລະ color2.
ຄວາມຕອບກັນທີ່ຫຼາຍຫຼາຍເນື່ອງຈະຕ້ອງໃຊ້ຫຼາຍກວ່າ. color1.
ຄວາມຕອບກັນທີ່ນ້ອຍຫຼາຍເນື່ອງຈະຕ້ອງໃຊ້ຫຼາຍກວ່າ. color2.

adjust-hue(color, degrees)

ປັບປ່ຽນສີຂອງສີຫຼັງຈາກການເພີ່ມຫຼືຫຼຸດປະລິມານຢູ່ລະດັບ -360 ຫາ 360 ອັງ.

ຕົວຢ່າງ:

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

ຜົນລັງ: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

ປັບປ່ຽນປະສົມສີໜຶ່ງຫຼືຫຼາຍປະສົມສີໃໝ່ດ້ວຍປະລິມານສະເພາະທີ່ກໍານົດ.
ການປັບປ່ຽນຂອງສາຍວັດທະນະທຳທີ່ມີຢູ່ໃນສີຫຼັງຈາກການເພີ່ມຫຼືຫຼຸດປະລິມານສະເພາະທີ່ກໍານົດ.

ຕົວຢ່າງ:

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

ຜົນລັງ:
change-color(color, red, green, blue, hue, saturation, lightness, alpha)

ການຕັ້ງຂໍ້ບັນຫາສີໜຶ່ງຫຼືຫຼາຍປະສົມສີໃໝ່.

ຕົວຢ່າງ:

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

ຜົນລັງ: #ffffd4
scale-color(color, red, green, blue, saturation, lightness, alpha) ຂະຫຍາຍປະສົມສີໜຶ່ງຫຼືຫຼາຍ.
rgba(color, alpha)

ສ້າງສີໃໝ່ດ້ວຍສາຍວັດທະນະທຳ alpha.

ຕົວຢ່າງ:

rgba(#7fffd4, 30%);

ຜົນ: rgba(127, 255, 212, 0.3)
lighten(color, amount) saturate(
amount saturate(
darken(color, amount) ຄຳຕິດຕັ້ງສູງສຸດຂອງ HSL ການສຳຫຼວດຕາມຄຳຕິດຕັ້ງຂອງມັນ.
amount saturate(
ຄຳຕິດຕັ້ງສູງສຸດຂອງ 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 通道ຕາມຄຳຕິດຕັ້ງຂອງມັນ.