Less derleyicisiyle onaltılık bir rengi rgba'ya nasıl dönüştürebilirim?

131

Takip koduna sahibim:

@color : #d14836;

.stripes span {
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
        to(transparent));

Ben dönüştürmek gerekir @coloriçin rgba(209, 72, 54, 1).

Bu yüzden, kodumda rgba(209, 72, 54, 1), değişkenimden bir rgba()değer oluşturan bir Less fonksiyonunu değiştirmem gerekiyor @color.

Bunu Less ile nasıl yapabilirim?

css less

— chubbyk
kaynak

3

Fadein / fadeout / fade fonksiyonları ihtiyacınız olanı yapmıyor mu? lesscss.org/#reference

— cimmanon

348

Aslında, Less dili adı verilen yerleşik bir işlevle birlikte gelir fade. Bir renk nesnesi ve mutlak opaklık yüzdesini iletirsiniz (daha yüksek değer, daha az saydam anlamına gelir):

fade(@color, 50%);   // Return @color with 50% opacity in rgba

— Ronald Pauffert
kaynak

42

@Soc, OP'nin sorusunu yanıtladı, ama siz bize cevabı verdiniz, BAŞKA HERKES buraya bulmak için geldi! Teşekkür ederim!

— BillyNair

1

Bence miktar parametresi şeffaflık seviyesi değil, aksine opaklık seviyesini mi gösteriyor?

— mousio

2

@mousio Aslında, tam olarak seçerek 50%, hem şeffaflık hem de opaklıktır . :)

— Dem Pilafian

1

@mousio Gerçekten teknik bilgi almak istiyorsanız, öğenin kapladığı her pikselin rengiyle "yarı saydam" rengin oranının daha doğru bir şekilde karıştırılacağına inanıyorum - bkz. en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) Ama pratik açıdan, tabii ki haklısın; yüzde veya ondalık değer, şeffaflık düzeyini değil, opaklık düzeyini temsil eder!

— Brian Lacy

5

Kayıt için bu, API'deki bir kusurdur. Her kullanmak istediğimde ona bakmak zorundayım. Mevcut RGBA'yı, gerçek bir CSS rgba bildirimi ile aynı tam menteşeyi çıkaracak şekilde SASS'ın yaptığı gibi bir LESS çağrısına - rgba (@colorValue, .5) dönüştürmeleri akıllıca olacaktır. Ama hey, bu benim whiney oluyorum. :)

— dudewad

105

Bir alfa anahtarına ihtiyacınız yoksa rengin onaltılık gösterimini kullanabilirsiniz. Alfa '1' olan bir rgba rengi, onaltılık değerle aynıdır.

İşte bunu gösterecek bazı örnekler:

@baseColor: #d14836;

html {
    color: @baseColor;
    /* color:#d14836; */
}

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    /* color:#d14836; */
}

div {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
    /* rgba(209, 72, 54, 0.5); */
}

span {
    color: fade(@baseColor, 50%);
    /* rgba(209, 72, 54, 0.5); */
}

h3 {
    color: fade(@baseColor, 100%)
    /* color:#d14836; */
}

Bu kodu çevrimiçi olarak test edin: http://lesstester.com/

— Sebastian Stiehl
kaynak

Aldığım bu hataya ne dersin? error evaluating function 'red': Cannot read property '0' of undefined

— Aldi Unanto

Bu bir süredir güncellenmedi, ancak Daha Az PHP ile şu hatayı alıyorum -

@colorGold: color('#C6AF87');  .box {         background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); }

Hata - CSS dosyası derlenemiyor (screen.less): kırmızı için beklenen renk (): "background-color: rgba ( kırmızı (@colorGold), yeşil (@colorGold), mavi (@colorGold), 0.3);

— Chris

1

@Chris, bunun Less PHP ile çalışmasını sağlamak için doğrudan rengi atayabilirsiniz, aynı zamanda mevcut daha az sürümle de çalışıyor gibi görünüyor, bu yüzden örneği uyarladım. @colorGold: #C6AF87;

— Sebastian Stiehl

@Soc bu benim nihai çözümümdü ve kısa bir süre sonra onu renkli etiketlere sarmak için ihtiyacım olan izlenimi neyin verdiğini bilmiyordum!

— Chris

Daha az

— işlevime göz atın

12

My Less mixin:

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);

    background-color: @rgba-color;

    // Hack for IE8:
    background: none\9; // Only Internet Explorer 8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
    // Problem: Filter gets applied twice in Internet Explorer 9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

Dene.

DÜZENLENMİŞ: IE filtresi alternatifli rgba arka planında görüldüğü gibi : IE9 her ikisini de oluşturur! , Karışıma bazı satırlar ekledim.

— helpse
kaynak

2

Görünen o ki, son Less güncellemesi 3.81 ile , rgba () fonksiyonunda sadece iki argüman kullanabilirsiniz.

rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)

Benim için çalışıyor, ancak resmi belgelerde bulamıyorum .

— Dmitry Davydov
kaynak