Saturday, 16 January 2016

Sass & Compass : Nilai warna automatic RGBA & convertion

RGBA (Red Green Blue Alpha) and HSLA (Hue Saturation Lightness Alpha) adalah warna yang didukung oleh browser modern. Untuk menyediakan browser lama adalah umum mendeklasikan sebuah warna mempunyai nilai hex pertama dan kemudian sebuah nilai RGBA atau HSLA untuk browser terbaru (dengan cara itu, browser baru menggunakan RGBA atau HSLA, sementara browser lama menggunakan nilai solid hex). Sebagai  contoh, untuk memungkinkan sebuah warna dengan beberapa alpha transparency, kita tampilkan sebagai berikut :

.color-me-bad {
color: #11c909;
color: rgba(17, 201, 9, 0.9);
}

Jika pemilihan warna dari campuran dari sebuah aplikasi graphic (Photoshop, Fireworks, dan sebagainya), itu tidak selalu sederhana untuk mendapatkan kedua nilai tersebut yaitu pada nilai hex dan RGBA , Sebelum Sass, saya telah menggunakan aplikasi kecil hanya untuk pekerjaan tersebut. Sekarang, saya persilakan untuk mengucapkan terima kasih pada Sass, karena dengan Sass kita dapat menuliskannya dengan cara yang sederhana sebagai berikut :

.color-me-good {
color: $green;
color: rgba($green, 0.9);
}


Kita menggunakan cara yang mudah untuk mengingat sebuah variable untuk direpresentasikan menjadi sebuah warna dan kemudian menggunakan sebuah function warna dari Sass untuk mengkonversikan warna tersebut menjadi nilai RGBA. Dalam contoh sebelumnya, kita menanyakan Sass untuk memberikan nilai dari warna (didefinisikan sbagai variable $green) sebagai niai RGBA dengan alpha channel pada 0.9. Ketika di compile, akan menghasilkan code CSS sebagai berikut:

.color-me-good {
color: #11c909;
color: rgba(17, 201, 9, 0.9);
}


Itu adalah cara yang murah dan tidak membutuhkan bayaran, Sass otomatis menyediakan warna sebagai sebuah nilai RGBA. alpha channel adalah pada 90 persen. Ini berarti bahwa kita dapat melihat 10 persen dari apapun dibelakang warna pada browser yang mengerti RGBA.

No comments:

Post a Comment