Fungsi Warna Sass
- Hal Sebelumnya Introspeksi Sass
- Hal Berikutnya Panduan Sass
Fungsi Warna Sass
Kami membagi fungsi warna di Sass menjadi tiga bagian: fungsi pengaturan warna, fungsi ambil warna, dan fungsi operasi warna:
Pengaturan fungsi warna Sass
Fungsi Operasi Warna Sass | Fungsi |
---|---|
rgb(merah, hijau, biru) |
Atur warna menggunakan model Red-Green-Blue (RGB) Contoh:rgb(0, 0, 255); |
rgba(merah, hijau, biru, alpha) |
Atur warna menggunakan model Red-Green-Blue-Alpha (RGBA). Contoh:rgba(0, 0, 255, 0.3); // Biru dengan kepadatan transparen |
hsl(hue, kepadatan, kecerahan) |
Atur warna menggunakan model Hue-Saturation-Lightness - dan mewakili koordinat sferik warna. Contoh:
hsl(120, 100%, 50%); // Hijau |
hsla(hue, kepadatan, kecerahan, alpha) |
Atur warna menggunakan model Hue-Saturation-Lightness-Alpha (HSLA). Contoh:
hsl(120, 100%, 50%, 0.3); // Hijau dengan kepadatan |
grayscale(color) |
Atur warna abu-abu yang memiliki kecerahan yang sama dengan warna. Contoh:grayscale(#7fffd4); Hasil: #c6c6c6 |
complement(color) |
Atur warna komplementer. Contoh:complement(#7fffd4); Hasil: #ff7faa |
invert(color, Buat warna campuran dari warna 1 dan warna 2.) |
Atur warna kontras atau negatif. Contoh:invert(white); Hasil: hitam |
Fungsi mengambil warna Sass
Fungsi Operasi Warna Sass | Fungsi |
---|---|
red(color) |
Mengembalikan nilai merah warna dengan angka diantara 0 hingga 255. Contoh:red(#7fffd4); Hasil: 127 red(red); blue(blue); |
green(color) |
Mengembalikan nilai hijau warna dengan angka diantara 0 hingga 255. Contoh:green(#7fffd4); blue(blue); green(blue); green(blue); |
Hasil: 0color) |
blue( Contoh:Dapatkan nilai biru warna dalam bentuk angka antara 0 hingga 255. blue(#7fffd4); Hasil: 212 blue(blue); |
Hasil: 255color) |
hue( Contoh:Kembalikan warna dengan derajat kebiruan dalam bentuk angka antara 0deg hingga 360deg. hue(#7fffd4); |
Hasil: 160degcolor) |
kepadatan( Contoh:Kembalikan kepadatan warna dalam bentuk angka antara 0% hingga 100%. kepadatan(#7fffd4); |
Hasil: 100%color) |
kecerahan( Contoh:Kembalikan kecerahan warna dalam bentuk angka antara 0% hingga 100%. kecerahan(#7fffd4); |
Hasil: 74.9%color) |
opacity( Contoh:alpha( alpha(#7fffd4); |
Hasil: 1color) |
opacity( Contoh:Kembalikan channel Alpha warna dalam bentuk angka antara 0 hingga 1. opacity(rgba(127, 255, 212, 0.5)); |
Hasil: 0.5
Fungsi Operasi Warna Sass | Fungsi |
---|---|
Deskripsi & ContohBobot yang besar artinya seharusnya digunakan lebih banyak, color2, Buat warna campuran dari warna 1 dan warna 2.) |
mix( |
adjust-hue(color, derajat) |
Tutupi warna dengan derajat kebiruan dari -360 derajat sampai 360 derajat. Contoh:adjust-hue(#7fffd4, 80deg); Hasil: #8080ff |
adjust-color(color, merah, hijau, biru, hue, kepadatan, kecerahan, alpha) |
Tutupi satu atau beberapa parameter dengan jumlah yang ditentukan. Contoh:adjust-color(#7fffd4, biru: 25); Hasil: |
change-color(color, merah, hijau, biru, hue, kepadatan, kecerahan, alpha) |
Atur satu atau beberapa parameter warna ke nilai baru. Contoh:change-color(#7fffd4, merah: 255); Hasil: #ffffd4 |
scale-color(color, merah, hijau, biru, kepadatan, kecerahan, alpha) | Skalakan satu atau beberapa parameter warna. |
rgba(warna, alpha) |
Buat warna baru menggunakan channel alpha yang diberikan. Contoh:rgba(#7fffd4, 30%); Hasil: rgba(127, 255, 212, 0.3) |
lighten(color, amount) | Buat warna yang lebih terang dengan jumlah antara 0% dan 100%. amount Parameter menaikkan kecerahan HSL menurut persen. |
darken(color, amount) | Buat warna yang lebih mendalam dengan jumlah antara 0% ke 100%. amount Parameter menurunkan kecerahan HSL menurut persen. |
saturate(color, amount) | Buat warna yang lebih kaya dengan jumlah antara 0% dan 100%. amount Parameter menaikkan kecerahan HSL menurut persen. |
desaturate(color, amount) | Buat warna dengan kecerahan yang rendah dengan jumlah antara 0% dan 100%. amount Parameter menurunkan kecerahan HSL menurut persen. |
opacify(color, amount) | Buat warna yang kurang transparan dengan jumlah antara 0 dan 1. amount Parameter menaikkan Kanal Alpha menurut nilai. |
fade-in(color, amount) | Buat warna yang kurang transparan dengan jumlah antara 0 dan 1. amount Parameter menurunkan Kanal Alpha menurut nilai. |
transparentize(color, amount) | Buat warna yang lebih transparan dengan jumlah antara 0 dan 1. amount Parameter menurunkan Kanal Alpha menurut nilai. |
fade-out(color, amount) | Buat warna yang lebih transparan dengan jumlah antara 0 dan 1. amount Parameter menaikkan Kanal Alpha menurut nilai. |
- Hal Sebelumnya Introspeksi Sass
- Hal Berikutnya Panduan Sass