Apakah fungsi saluran warna dalam Less?

LESS (Pelajar CSS) ialah prapemproses yang dibangunkan di atas CSS biasa, membolehkan pembangun menyelenggara dan menyesuaikan kod CSS dengan mudah. Sebagai contoh, ia membolehkan mencipta pembolehubah dan fungsi dalam kod CSS. Oleh itu, pembangun tidak perlu menulis kod pendua seperti yang biasa kita lakukan dalam CSS biasa.

Fungsi saluran warna juga merupakan satu lagi ciri penting Less, yang mengambil nilai warna sebagai input dan mengembalikan nilai saluran warna tertentu.

Dalam tutorial ini, kita akan mempelajari tentang 12 fungsi saluran warna dalam Kurang melalui contoh. Ini ialah senarai semua fungsi saluran warna.

• Fungsi Merah()

• Fungsi hijau()

• Fungsi Biru()

• Fungsi Alpha()

• Fungsi Hue()

• Fungsi Ketepuan()

• Fungsi Kecerahan()

• Fungsi Hsvhue()

• Fungsi Hsvsaturation()

• Hsvvalue() fungsi

• Fungsi Luma()

• Fungsi Pencahayaan()

Fungsi Merah()

red() ialah fungsi saluran warna pertama dalam senarai kami. Ia memerlukan nilai warna sebagai hujah dan mengembalikan nilai antara 0 dan 255, iaitu keamatan merah dalam warna semasa.

Contoh

Dalam contoh di bawah, kami menyimpan nilai rgb oren sebagai nilai pembolehubah "mycolor". Selepas itu, kami menggunakan fungsi red() dengan menghantar "myclor" sebagai parameter dan menyimpan nilai pulangan dalam pembolehubah "redchannle".

Dalam output, pengguna boleh melihat bahawa nilai pembolehubah "redchannle" ialah 255.

@mycolor: rgb(255, 165, 0);
@redchannel: red(@mycolor);
.element {
   background-color: @redchannel;
}

Output

.element {
   background-color: 255;
}

Fungsi hijau()

hijau() berada di tempat kedua dalam senarai fungsi saluran kurang warna kami. Ia menerima nilai warna dan mengembalikan keamatan hijau antara 0 dan 255.

Contoh

Dalam contoh di bawah, kami menyimpan nilai warna RGB dalam pembolehubah "warna saya". Kami sentiasa menulis keamatan hijau sebagai hujah kedua kepada kaedah rgb().

Kami menggunakan fungsi hijau() untuk mendapatkan nilai saluran warna hijau daripada nilai rgb, dan dalam output, kami dapat melihat bahawa ia mengembalikan 15.

@mycolor: rgb(0, 15, 0);
@greenchannel: green(@mycolor);
.element {
   color: @greenchannel;
}

Output

.element {
   color: 15;
}

fungsi biru()

Fungsi

blue() mengembalikan nilai saluran biru yang dikaitkan dengan warna yang diluluskan sebagai hujah.

Pengguna boleh mengikuti contoh di bawah untuk menggunakan fungsi blue() dalam kurang.

Contoh

Di sini kami menghantar nilai warna heksadesimal "#FF5733" sebagai parameter fungsi biru(), iaitu warna oren.

Output menunjukkan 51 sebagai nilai saluran biru, yang bermaksud keamatan biru dalam warna tertentu ialah 51.

@bluechannel: blue(#FF5733);
.output {
   color: @bluechannel;
}

Output

.output {
   background-color: 51;
}

Fungsi Alpha()

Seperti namanya, fungsi alpha() digunakan untuk mendapatkan kelegapan warna semasa, yang mewakili nilai saluran alfa.

Dalam format warna rgba(), kami lulus nilai alfa sebagai parameter terakhir.

Contoh

Pembolehubah "warna" dalam contoh di bawah menyimpan nilai warna rgba. Di sini kita menghantar "0.9" sebagai nilai saluran alfa dalam rgba.

Kami menggunakan fungsi alpha() untuk mendapatkan kelegapan "warna" dan ia mengembalikan 0.9 seperti yang dapat kita lihat dalam output.

@color: rgba(25, 77, 91, 0.9);
@alphachannel: alpha(@color);
.output {
   opacity: @alphachannel;
}

Output

.output {
   opacity: 0.9;
}

Fungsi Hue()

Fungsi

hue() digunakan untuk mendapatkan nilai rona warna tertentu. Ia mengembalikan sudut rona warna pada roda warna, dengan nilai antara 0 dan 360.

Contoh

Dalam contoh, kami menyimpan nilai RGB dalam pembolehubah "warna". Selepas itu, kami menggunakan fungsi hue() untuk mendapatkan nilai hue warna semasa.

Kami menggunakan nilai warna apabila mentakrifkan warna menggunakan hsl(). Fungsi Hue() mengembalikan nilai warna rgb(34, 9, 0) 16.

@color: rgb(34, 9, 0);
@huevalue: hue(@color);
.element {
   color: hsl(@huevalue, 100%, 50%);
}

Output

.element {
   color: hsl(16, 100%, 50%);
}

Fungsi Ketepuan()

Fungsi

saturation() mengembalikan nilai ketepuan warna yang diluluskan sebagai hujah, antara 0 hingga 100%.

Contoh

Dalam contoh ini, kami mengambil warna rgb(34, 9, 76) untuk mendapatkan nilai tepunya. Di sini, kami melaksanakan fungsi tepu() dalam kaedah hsl() untuk mendapatkan nilai tepu warna semasa.

Dalam output kita dapat perhatikan bahawa ia mengembalikan 78.8% sebagai nilai tepu

@color: rgb(34, 9, 76);
.element {
   color: hsl(21, saturation(@color), 50%);
}

Output

.element {
   color: hsl(21, 78.8%, 50%);
}

Fungsi Kecerahan()

Fungsi

brightness() digunakan untuk mendapatkan kecerahan fungsi tertentu. Ia mengembalikan nilai antara 0% dan 100%.

Contoh

Di sini, kami mendapat nilai kecerahan warna rgb(34, 9, 76) dan menggunakannya apabila mentakrifkan warna lain menggunakan kaedah hsl(). Dalam output, pengguna boleh melihat bahawa kaedah Brightness() mengembalikan nilai 16.7%.

@color: rgb(34, 9, 76);
.element {
   color: hsl(21, 78.8%, brightness(@color));
}

Output

.element {
   color: hsl(21, 78.8%, 16.7%);
}

Fungsi Hsvhue()

Fungsi

hsvhue() digunakan untuk mendapatkan nilai rona dalam model warna hsv.

Contoh

Dalam contoh ini, kita mendapat nilai hue dalam model hsv menggunakan fungsi hsvhue(), yang mengembalikan nilai antara 0 dan 360. Dalam output, kita dapat melihat bahawa ia mengembalikan nilai warna 16.

@ hsvhueValue: hsvhue(rgb(255, 87, 51);
.demo {
   background-color: hsv(@hsvhueValue, 70%,60%);
}

Output

.demo {
   background-color: hsv(16, 70%, 60%);
}

Fungsi Hsvsaturation()

Fungsi

hssaturation() digunakan untuk mendapatkan nilai tepu dalam model warna hsv.

Contoh

Dalam contoh ini, kami menggunakan fungsi hsvsaturation() dengan menghantar nilai warna sebagai parameter. Dalam output, kita dapat melihat bahawa ia mengembalikan tepu 100%.

@hsvsaturationValue: hsvsaturation(rgb(255, 87, 51);
.demo {
   background-color: hsv(65, @hsvsaturationValue,80%);
}

输出

.demo {
   background-color: hsv(65, 100%, 80%);
}

Hsvvalue() 函数

hsvalue()函数用于获取hsv颜色模型中的亮度值。

示例

这里，我们使用 hsvvalue() 函数来获取 hsv 模型中颜色的亮度。它返回 100%，我们可以在输出中看到。

@hsvvalue: hsvvalue(rgb(255, 87, 51);
.demo {
   background-color: hsv(65, 90%, @hsvvalue);
}

输出

.demo {
   background-color: hsv(65, 90%, 100%);
}

Luma() 函数

luma() 函数用于通过伽马校正获取特定值的亮度值。它返回 1 到 100 之间的值。

示例

在下面的示例中，我们使用 luma() 函数获取经过伽玛校正的 rgb(50, 250, 150) 颜色的亮度值。在输出中，我们可以看到它返回了 71.251% 的值。

.demo {
   background: luma(rgb(50, 250, 150));
}

输出

.demo {
   Background: 71.251%
}

亮度()函数

luminance() 函数还用于获取特定值的亮度值，但不进行伽玛校正。

示例

在这个例子中，我们使用luminance()函数来获取没有伽马校正的rgb(50,250,150)颜色的亮度值。用户可以观察相同颜色值的luma()和luminance()函数的输出值之间的差异。

.demo {
   background: luminance(rgb(50, 250, 150));
}

输出

.demo {
  Background: 78.533 %
}

Atas ialah kandungan terperinci Apakah fungsi saluran warna dalam Less?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!