कम

Question

के साथ स्ट्रिंग के अंदर एकाधिक फ़ंक्शन मैंने कुछ समय पहले similar question से पूछा, और एक अच्छा जवाब प्राप्त हुआ। दुर्भाग्यवश, इस दौर के उत्तर में पर्याप्त नहीं है, और सवाल थोड़ा अधिक जटिल है।

मैं इस समय एक थीम बनाने के लिए LESSHat मिश्रणों के साथ LESS का उपयोग कर रहा हूं। मैंने चर के रूप में कई रंगों को परिभाषित किया है, और वर्तमान में LESSHat के .gradient() मिश्रण का उपयोग करके ढाल को परिभाषित करने का प्रयास कर रहा हूं। समस्या यह है कि mixin एक भी तर्क के रूप में एक स्ट्रिंग के बजाय प्रत्येक ढाल पैरामीटर के लिए तर्क की एक श्रृंखला, उदाहरण के लिए स्वीकार करता है:

#element { 
    .gradient(~"linear-gradient(90deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%)"); 
} 

सभी अच्छी तरह से और इसके बाद के संस्करण के साथ अच्छा है, और मैं अपने चर का उपयोग कर सकते हैं स्ट्रिंग इंटरपोलेशन (यानी @{color-var}) का उपयोग कर स्ट्रिंग के अंदर। हालांकि, मैं भी कुछ काम करता है, कुछ इस तरह चर पर चलने के लिए करना चाहते हैं:

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, darken(@green, 10%) 50%, darken(@green, 10%) 100%)"); 

समस्या यह है कि darken(@green, 10%) संकलित नहीं किया जाता है, और कुछ ब्राउज़रों बस green के रूप में इस रंग की व्याख्या। क्या किसी को उपरोक्त स्ट्रिंग के अंदर darken() फ़ंक्शन की वापसी को शामिल करने का सही तरीका पता है, इसके लिए एक अलग चर बनाने के बिना?

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, "darken(@green, 10%)" 50%, "darken(@green, 10%)" 100%)"); 
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, {darken(@{green}, 10%)} 50%, {darken(@{green}, 10%)} 100%)"); 

Answer 1

यह काम करना चाहिए, यह आपकी पहली दृष्टिकोण की तरह है, लेकिन आप भी ~ शामिल करना चाहिए: (

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, " darken(@green, 10%) ~" 50%, " darken(@green, 10%) ~" 100%)"); 

Answer 2

है आप पहली बार एक चर में अन्धेरा रंग की बचत की कोशिश की:

संदर्भ के लिए, मैं कोई लाभ नहीं हुआ निम्नलिखित की कोशिश की? इस तरह:

@darkened-green: darken(@green, 10%); 
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, @{darkened-green} 50%, @{darkened-green} 100%)");