Sass / Compass - Hex, RGB veya Adlandırılmış Rengi RGBA'ya Dönüştür

86

Bu Compass 101 olabilir, ancak herhangi biri bir rengin alfa değerini belirleyen bir mixin yazdı mı? İdeal olarak, karışımın herhangi bir renk tanımını almasını ve şeffaflık uygulamasını istiyorum:

@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);

— Pat Newell
kaynak

180

Sass'ta yerleşik olan işlevi kullanınrgba

Bir rengin opaklığını ayarlar.

Örnekler:

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

Parametreler:
(Renk) renk
(Sayı) alfa - 0 ile 1 arasında bir sayı

İade:
(Renkli)

Kod:

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

— Maxbeatty
kaynak

4

Bunu denemediğime inanamıyorum. Çok teşekkürler

— Pat Newell

@jon, cevabımla ilgili kafa karıştırıcı olan şeyi detaylandırabilir misin, böylece onu iyileştirebilirim?

— maxbeatty

@maxbeatty Yorumuma ne olduğundan emin değilim ama "==>" yüzünden kafam karıştı ... geriye dönüp baktığımda bu açık görünüyor, ama kendinizi kaybolmuş hissettiğinizde yorumlardan gerekli kodu söylemek gerçekten zor. sanırım kod bloklarına yalnızca gerçek kullanılabilir kod dahil edilerek daha açık hale getirilebilir.

— jon

@jon, blok alıntı doğrudan Sass dokümantasyonundandır. Sadece ilgili yerleşik işleve bağlanmak yerine. Cevaba ilgili belgelerin dahil edilmesinin yararlı olacağını düşündüm. Üzgünüm bu kafa karıştırıcıydı.

— maxbeatty

oh DUH. Arrg. Bunun dışında düşünmeye çalışmadan önce daima KUTUNUN İÇİNDE bakın. Sheesh!

— dudewad

8

Kullandığım rgbapng pusula eklentisi

rgbapng, tarayıcılar arası * uyumlu RGBA desteği sağlamak için bir Compass eklentisidir. RGBA'yı desteklemeyen tarayıcılar için anında tek piksel alfa şeffaf PNG'ler oluşturarak çalışır. Sorunsuz kurulum ve dağıtım ile sonuçlanan saf Ruby ChunkyPNG kütüphanesini kullanır.

Yüklemek

gem install compass-rgbapng

Kullanım

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

Şu şekilde derler:

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

— Ilia Choly
kaynak

whoa ... harika. Pusulanın gücü beni şaşırttı. yanıt için teşekkürler

— Pat Newell

7

Rgba işlevi saydamlık olmadan renk üzerinde çalışmaz, tekrar bir onaltılık döndürür. Sonuçta, hex'i rgba'ya dönüştürmek anlamına gelmiyor, biz sadece hex'den kar elde ediyoruz (henüz) alfa'ya izin vermiyor.

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

Böylece, rgb dizesini oluşturan tüm küçük işlevler yaptım. Şimdilik asetatlarla uğraşmama gerek yok.

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

— Carlos Martínez
kaynak

2

IE'nin ## AARRGGBB formatı için ie-hex-str () de vardır:

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

— mikespainhower
kaynak

2

from_hex(hex_string, alpha = nil);

Gönderen belgeler :

Geçerli bir CSS onaltılık dizesinden yeni bir renk oluşturun. Önde gelen hash isteğe bağlıdır.

— user776411
kaynak