मैं कम संकलक के साथ एक हेक्साडेसिमल रंग को rgba में कैसे परिवर्तित करूं?

Question

मेरे पास निम्नलिखित कोड हैं:

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

मुझे बदलने की जरूरत @colorहै rgba(209, 72, 54, 1)।

इसलिए मुझे rgba(209, 72, 54, 1)अपने कोड को कम फ़ंक्शन के साथ बदलने की आवश्यकता है rgba()जो मेरे @colorचर से एक मूल्य उत्पन्न करता है ।

मैं इसे कम के साथ कैसे कर सकता हूं?

Comments

क्या फ़ेडिन / फ़ेडआउट / फ़ेड फ़ंक्शंस वो नहीं करते हैं जिनकी आपको ज़रूरत है? lesscss.org/#reference

— cimmanon

Answer 1

दरअसल, कम भाषा एक एम्बेडेड फ़ंक्शन के साथ आती है जिसे कहा जाता है fade। आप एक रंग वस्तु और पूर्ण अपारदर्शिता% (उच्च मूल्य का मतलब कम पारदर्शी) पास करते हैं:

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

Comments

@ डॉक्टर ने ओपी के सवाल का जवाब दिया, लेकिन आपने हमें जवाब दिया कि हर कोई ईएलएसई खोजने के लिए यहां आया था! धन्यवाद!

— बिलीनेयर

मुझे लगता है कि राशि पैरामीटर पारदर्शिता स्तर नहीं है, लेकिन इसके विपरीत अस्पष्टता स्तर निर्दिष्ट करता है?

— मूसियो

@ मूसियो वास्तव में, बिल्कुल उठाकर 50%, यह पारदर्शिता और अस्पष्टता दोनों को सही ढंग से बताता है । :)

— डेम पिलाफियन

@mousio यदि आप वास्तव में तकनीकी प्राप्त करना चाहते हैं, तो मेरा मानना ​​है कि प्रत्येक पिक्सेल के रंग के साथ मिश्रण करने के लिए "पारभासी" रंग का अनुपात अधिक सटीक है जो तत्व ओवरले करता है - en.wikipedia.org/wiki/Alpha-compositing#Alpha_blending देखें : ) लेकिन व्यावहारिक रूप से, बेशक आप सही हैं; प्रतिशत या दशमलव मान अस्पष्टता स्तर का प्रतिनिधित्व करता है, पारदर्शिता स्तर का नहीं!

— ब्रायन लेसी

रिकॉर्ड के लिए यह एपीआई में एक दोष है। मुझे इसे हर बार देखना होगा जब मैं इसका उपयोग करना चाहता हूं। यह समझ में आता है कि SASS करता है - rgba (@colorValue, .5) जैसे मौजूदा RGBA को चीनी में बदलना ताकि यह वास्तविक CSS rgba घोषणा के समान हिंग का उत्पादन करे। लेकिन हे, कि मैं कराह रहा हूँ। :)

— दुवेद

Answer 2

यदि आपको एक अल्फा कुंजी की आवश्यकता नहीं है, तो आप बस रंग के हेक्साडेसिमल प्रतिनिधित्व का उपयोग कर सकते हैं। '1' के अल्फा के साथ एक आरजीबीए रंग हेक्साडेसिमल मूल्य के समान है।

यहाँ कुछ उदाहरण प्रदर्शित किए गए हैं:

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

इस कोड को ऑनलाइन टेस्ट करें: http://lesstester.com/

Comments

इस त्रुटि के बारे में मुझे कैसे मिला? error evaluating function 'red': Cannot read property '0' of undefined

— अल्दी अन्टो

इसे थोड़ी देर के लिए अपडेट नहीं किया गया है, लेकिन कम PHP के साथ मुझे निम्नलिखित त्रुटि मिल रही है - @colorGold: color('#C6AF87'); .box { background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); } त्रुटि है - CSS फ़ाइल (स्क्रीन.लेस) को संकलित नहीं कर सका: लाल रंग के लिए अपेक्षित रंग (): 'पृष्ठभूमि-रंग: rgba' पर विफल लाल (@colorGold), हरा (@colorGold), नीला (@colorGold), 0.3);

— क्रिस

@ क्रिस आप कम PHP के साथ इस काम को करने के लिए सीधे रंग असाइन कर सकते हैं यह वर्तमान कम संस्करण के साथ भी काम करता है इसलिए मैंने उदाहरण को अनुकूलित किया। @colorGold: #C6AF87;

— सेबेस्टियन स्टीहल

@ यह मेरा अंतिम समाधान था और मुझे यह पता चलने के कुछ समय बाद ही पता चला कि मुझे क्या आभास हुआ था कि मुझे इसे कलर टैग में लपेटने की जरूरत है!

— क्रिस

मेरी कम समारोह, की जाँच करें stackoverflow.com/questions/14860874/...

— helpse

Answer 3

मेरा कम मिश्रण:

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

कोशिश करो।

संपादित: IE फिल्टर विकल्प के साथ rgba पृष्ठभूमि पर देखा के रूप में : IE9 दोनों renders! , मैंने मिक्सी में कुछ लाइनें जोड़ीं।

Answer 4

ऐसा लगता है कि हाल ही में कम 3.81 अपडेट के साथ , आप आरजीबीए () फ़ंक्शन में सिर्फ दो तर्कों का उपयोग कर सकते हैं।

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

यह मेरे लिए काम करता है, लेकिन मैं इसे आधिकारिक दस्तावेज में नहीं ढूंढ सकता ।