Sass / Compass - Konversi Hex, RGB, atau Named Color ke RGBA

Ini mungkin Kompas 101, tetapi apakah ada yang menulis mixin yang menetapkan nilai alfa suatu warna? Idealnya, saya ingin mixin mengambil bentuk definisi warna apa pun, dan menerapkan transparansi:

@include set-alpha( red, 0.5 );          //prints rgba(255, 0, 0, 0.5);
@include set-alpha( #ff0000, 0.5 );      //prints rgba(255, 0, 0, 0.5);
@include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);

Gunakan rgbafungsi bawaan Sass

Menetapkan opasitas warna.

Contoh:

rgba (# 102030, 0.5) => rgba (16, 32, 48, 0.5)
rgba (biru, 0.2) => rgba (0, 0, 255, 0.2)

Parameter:
(Color) color
(Number) alpha - Angka antara 0 dan 1

Pengembalian:
(Warna)

Kode:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);

Saya menggunakan plugin kompas rgbapng

rgbapng adalah plugin Kompas untuk menyediakan dukungan RGBA yang kompatibel dengan lintas browser *. Ia bekerja dengan membuat PNG transparan alfa piksel tunggal dengan cepat untuk browser yang tidak mendukung RGBA. Ia menggunakan pustaka Ruby ChunkyPNG murni yang menghasilkan instalasi dan penyebaran yang tidak merepotkan.

Install

gem install compass-rgbapng

Pemakaian

@include rgba-background(rgba(0,0,0,0.75));

Dikompilasi ke:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

Fungsi rgba tidak berfungsi pada warna tanpa transparansi, ia mengembalikan hex lagi. Lagipula, itu tidak dimaksudkan untuk mengubah hex menjadi rgba, kami hanya menghasilkan keuntungan dari hex tidak mengizinkan alpha (belum).

rgba(#fff, 1) // returns #fff

Jadi, saya membuat beberapa fungsi kecil yang membangun string rgb. Saya tidak perlu berurusan dengan transparansi untuk saat ini.

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

Ada juga ie-hex-str () untuk format IE ## AARRGGBB:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */

from_hex(hex_string, alpha = nil);

Dari dokumentasi :

Buat warna baru dari string hex CSS yang valid. Hash terkemuka adalah opsional.