Jak przekonwertować kolor szesnastkowy na rgba za pomocą kompilatora Less?

133

Mam następujący kod:

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

Muszę przekonwertować @colorna rgba(209, 72, 54, 1).

Dlatego muszę zastąpić rgba(209, 72, 54, 1)w moim kodzie funkcją Less, która generuje rgba()wartość z mojej @colorzmiennej.

Jak mogę to zrobić za pomocą Less?

css less chubbyk
źródło
3
Czy funkcje fadein / fadeout / fade nie robią tego, czego potrzebujesz? lesscss.org/#reference
cimmanon

Odpowiedzi:

350

W rzeczywistości język Less ma wbudowaną funkcję o nazwie fade. Przekazujesz obiekt kolorowy i bezwzględny% krycia (wyższa wartość oznacza mniej przezroczystości):

fade(@color, 50%);   // Return @color with 50% opacity in rgba
Ronald Pauffert
źródło
42
@Soc odpowiedział na pytanie OP, ale dałeś nam odpowiedź KAŻDY INNY przybył tutaj, aby znaleźć! Dziękuję Ci!
BillyNair
1
Myślę, że parametr ilości nie jest poziomem przezroczystości, ale przeciwnie oznacza poziom krycia?
mousio
2
@mousio Właściwie, wybierając dokładnie 50%, jest poprawnie zarówno przezroczystość, jak i krycie. :)
Dem Pilafian
1
@mousio Jeśli chcesz uzyskać naprawdę techniczne podejście, uważam, że dokładniejsze jest połączenie proporcji „półprzezroczystego” koloru z kolorem każdego piksela, na który nakłada się element - zobacz en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending : ) Ale w praktyce oczywiście masz rację; wartość procentowa lub dziesiętna reprezentuje poziom krycia, a nie poziom przezroczystości!
Brian Lacy,
5
Tak na marginesie jest to wada API. Muszę to sprawdzić za każdym razem, gdy chcę go użyć. Byłoby mądrze z ich strony, aby przerobić istniejący RGBA na MNIEJSZE wywołanie, tak jak robi to SASS - rgba (@colorValue, .5), tak aby wypisało dokładnie ten sam hing, co rzeczywista deklaracja rgba CSS. Ale hej, to ja jęczę. :)
dudewad
106

Jeśli nie potrzebujesz klucza alfa, możesz po prostu użyć szesnastkowej reprezentacji koloru. Kolor rgba z alfą „1” jest taki sam, jak wartość szesnastkowa.

Oto kilka przykładów, które pokazują, że:

@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; */
}

Przetestuj ten kod online: http://lesstester.com/

Sebastian Stiehl
źródło
A co z tym błędem, który otrzymałem? error evaluating function 'red': Cannot read property '0' of undefined
Aldi Unanto
To nie było aktualizowane przez jakiś czas, ale przy Less PHP otrzymuję następujący błąd - @colorGold: color('#C6AF87'); .box { background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); } Błąd: - Nie można skompilować pliku CSS (screen.less): oczekiwano koloru dla red (): nie powiodło się przy `background-color: rgba ( czerwony (@colorGold), zielony (@colorGold), niebieski (@colorGold), 0.3);
Chris
1
@Chris, możesz przypisać kolor bezpośrednio, aby ta działała z Less PHP, wydaje się również działać z obecną wersją Less, więc dostosowałem przykład. @colorGold: #C6AF87;
Sebastian Stiehl
@Soc to było moje ostateczne rozwiązanie i znalazłem je wkrótce po tym, jak nie wiem, co dało mi wrażenie, że potrzebowałem owinąć go kolorowymi metkami!
Chris
Sprawdź moją funkcję mniej, stackoverflow.com/questions/14860874/ ...
helpse
12

Mój mniejszy skład:

.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
    }
}

Spróbuj.

EDYTOWANO: Jak widać na tle rgba z alternatywnym filtrem IE: IE9 renderuje oba! , Dodałem kilka linii do miksu.

helpse
źródło
2

Wygląda na to, że w najnowszej aktualizacji 3.81 Less możesz użyć tylko dwóch argumentów w funkcji rgba ().

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

U mnie działa, ale nie mogę znaleźć tego w oficjalnej dokumentacji .

Dmitry Davydov
źródło