Less.js: कस्टम फ़ंक्शंस बनाना

शायद इसे मिक्स-इन से अलग करने और CSS सिंटैक्स के करीब रखने के लिए, यह हो सकता है:

@darkfadein(<strong i="6">@color</strong>, @value): fadein(darken(<strong i="7">@color</strong>, @value));

एक चर की तरह जो मापदंडों पर निर्भर करता है (जो आपको लगता है कि एक प्रकार का कार्य है =)

+1 से @souldreamer का सिंटैक्स।

लेकिन @souldreamer के सिंटैक्स के साथ कुछ लिखना संभव नहीं होगा
वेरिएबल्स में मान और उनका फिर से उपयोग करें।

इस वाक्यविन्यास का उपयोग कर सकते हैं:

  @darkfadein(<strong i="9">@color</strong>, @value) {
     <strong i="10">@foo</strong>: darken(<strong i="11">@color</strong>, @value);
     return: fadein(@foo);
  }

हो सकता है कि बाद के संस्करणों में ऐसा कुछ करना संभव हो:

  @darkfadein(<strong i="15">@color</strong>, @value) {
     <strong i="16">@foo</strong>: darken(<strong i="17">@color</strong>, @value);
     for(<strong i="18">@i</strong> = 0; <strong i="19">@i</strong> < 5; @i++): {
       <strong i="20">@foo</strong>: darken(<strong i="21">@foo</strong>, @i);
     };
     return: fadein(@foo);
  }

मुझे मूल्य वापस करने के लिए किसी प्रकार के फ़ंक्शन का उपयोग करने की समान आवश्यकता है। मुझे लगता है कि दो संभावित समाधान हैं। एक समाधान वैरिएबल सिंटैक्स को ऊपर उल्लिखित @Deltachaos के रूप में विस्तारित करना होगा, जो अनिवार्य रूप से है:

@grid-width(<strong i="7">@columns</strong>, @column-width) {
    <strong i="8">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: @grid-width(6,60);
}

दूसरा तरीका यह होगा कि मिक्सिन का इस्तेमाल किया जाए। चूंकि कंपाइलर मिक्सिन्स को वैसे भी जावास्क्रिप्ट फ़ंक्शन के रूप में मानता है, _ return फीचर को मिक्सिन्स_ में जोड़ना एक आसान उपाय होगा। यहाँ यह कैसा दिखेगा:

.grid-width(<strong i="13">@columns</strong>, @column-width) {
    <strong i="14">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

एसएएसएस के "कार्यात्मक निर्देश" एक समान परिणाम प्रदान करते हैं, हालांकि मेरा मानना ​​​​है कि यह मिश्रित समाधान अधिक सुरुचिपूर्ण होगा।

अंक 508 और 609 भी इसी से संबंधित हैं।

मुझे लगता है कि @tylertate का दूसरा सिंटैक्स सबसे अच्छा होगा। मैं सबसे आसान होना चाहता हूं क्योंकि जैसा कि आपने कहा था कि जावास्क्रिप्ट के रूप में कम पहले से ही मिश्रित मिश्रण हैं।

क्या ऐसा कुछ मिश्रणों के साथ संभव होगा?

.grid-width(<strong i="8">@columns</strong>, @column-width) {
    <strong i="9">@computedWidth</strong> = @columns*@column-width;
    for (var i = 0; i <= 36; i++) {
      <strong i="10">@computedWidth</strong> = darken(<strong i="11">@computedWidth</strong>, i);
    }
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

मैं इसके बजाय एक परिभाषित कम प्लगइन सिंटैक्स की तरह कुछ देखना चाहता हूं, और प्रोग्रामिंग-जैसे तर्क को जावास्क्रिप्ट कम प्लगइन में ले जाना चाहता हूं। ये सुझाव वर्तमान LESS सिंटैक्स और डिज़ाइन के साथ असंगत हैं।

सहमत .. उस चिह्नित दस्तावेज़ के बारे में एक बग है क्योंकि जब आप जानते हैं कि कार्यों को जोड़ने के लिए अपेक्षाकृत सरल है।

तो संकल्प क्या था?

हमें इसे दस्तावेज करने की जरूरत है। देखें https://github.com/cloudhead/lesscss.org/issues/54

और less.js से जुड़ी हुई समस्या से पता चलता है कि आप ब्राउज़र में किसी फ़ंक्शन को कम में कैसे जोड़ सकते हैं

less = { functions: { rgbstr: function (color) {var str = color; return new(less.tree.Quoted)('"' + str + '"', str,true,1);}}};

फिलहाल नोड संस्करण में कार्यों को प्लग इन करने का कोई तरीका नहीं है, लेकिन वहां होना चाहिए

धन्यवाद, मैं जावास्क्रिप्ट को LESS के सिंटैक्स से बाहर निकालने के लिए प्रतिक्रिया और स्थिति की सराहना करता हूं।

हालांकि, किसी विशिष्ट संपत्ति के साथ मिश्रण के वापसी मूल्य को जोड़ने के लिए मजबूर नहीं होना ऐसा स्पष्ट उपयोग मामला जैसा लगता है। कोई भी जो ग्रिड का उपयोग करता है वह वही करना चाहता है जो @Deltachaos करने की कोशिश कर रहा था। प्लगइन बनाने के स्तर को गिराए बिना इसे हासिल करने में सक्षम होना बहुत अच्छा होगा।

यह एक मुश्किल बात है - अगर आपको लूप की जरूरत है या अगर इसे प्लगइन में रहने की जरूरत है।

हालांकि अगर यह विशिष्ट मूल्यों के साथ 3 कम कार्यों को कॉल कर रहा है, तो मैं मानता हूं कि सिंटैक्स डीआरवाई बनाने के लिए इसे कम से कम निकालने में सक्षम होना समझ में आता है - इस तथ्य को निकालने के लिए प्लगइन लिखना समझ में नहीं आता है कि आप चाहते हैं कि एक जगह पर ५% अंधेरा हो जाए।

मैंने फिर से खोला है लेकिन इसे कहीं और दोहराया जा सकता है, हम देखेंगे।

फिलहाल मिक्सिन स्कोप से वेरिएबल सभी बाहरी स्कोप में कॉपी हो जाते हैं - जो एक तरह से वेरिएबल को वापस करने का तरीका है .. लेकिन यह भयानक समस्याएं पैदा कर रहा है और मैं इसे हटाना चाहता हूं।

#538 . का डुप्लिकेट

"मिक्सिन स्कोप से वेरिएबल सभी बाहरी स्कोप में कॉपी हो जाते हैं"

उह, सच में? हां, आइए उस व्यवहार को हटा दें। मैं चाहता हूं कि चर निर्यात के लिए चिह्नित हों, या केवल स्वचालित लीकिंग की तुलना में कुछ अन्य चीजें। यह मेरे लिए अपेक्षित व्यवहार नहीं है। चर ब्लॉक-स्कोप होना चाहिए।

हाँ, यह बैक डोर बग के माध्यम से सहायक कार्यों की तरह है

मुझे एक हैक मिलता है: यदि आप वैश्विक जेएस फ़ंक्शन घोषित करते हैं, तो आप इसे बाद में उपयोग कर सकते हैं!

<strong i="6">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="7">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevain को अभी वही हैक मिला है :)

@fabienevain यह अच्छी तरह से काम करता है, धन्यवाद ~: +1:

मैंने पाया कि आप process.mainModule तक पहुंच कर ही eval जेल से वास्तविक कार्यों बना सकते हैं ... केवल पकड़ आप पर पुनरावृति करने पड़ सकता है process.mainModule.children और मैच less.js अगर में किसी कारण परिवर्तन के लिए है कि आदेश भविष्य। मेरी योजना है कि केवल आँख बंद करके कम भरोसा करना तीसरा मॉड्यूल नहीं है।

दुर्भाग्य से आप require तक नहीं पहुंच सकते हैं, लेकिन आप fs और अन्य तक पहुंच सकते हैं जो पहले से कम की आवश्यकता है, जो कि बहुत है:

<strong i="10">@anything</strong>: `(function() {
    // console.log(process.mainModule.children[0].exports); // node fs is here
    // console.log(process.mainModule.children[2].children) // children of less, more node modules!
    var less = process.mainModule.children[2].exports;

    less.functions.functionRegistry.add("firstfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("00ff00");
    });

    less.functions.functionRegistry.add("secondfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("ff0000");
    });
})()`;


test {
    background: firstfunc(white);
    color: secondfunc(black);
}

वास्तविक कार्य करने के बारे में साफ बात यह context चर है, जिसमें रसदार विवरण शामिल हैं जैसे फ़ाइल संसाधित की जा रही है ताकि आप उदाहरण के लिए सेटिंग्स आदि के साथ स्वयं का एसवीजी डेटा यूरी आयात बना सकें।

संपादित करें मुझे आश्चर्य है कि अगर जेएस को बाहर रखने की कोशिश की जाती है तो बैकटिक्स भी क्यों पेश किए जाते हैं। मैं अपने LESS को यथासंभव कॉपी और पेस्ट करने योग्य पसंद करता हूं इसलिए प्लगइन्स मेरे लिए अच्छे नहीं हैं।

मैं अपने LESS को यथासंभव कॉपी और पेस्ट करने योग्य पसंद करता हूं इसलिए प्लगइन्स मेरे लिए अच्छे नहीं हैं।

तो आप अपना कोड _is_ "कॉपी और पेस्ट करने योग्य" मान लेते हैं, भले ही आपको अपने इनलाइन बैकटिक हैक्स में नोड.जेएस-आधारित कम.जेएस कंपाइलर की आवश्यकता हो, लेकिन साथ ही आपको लगता है कि यह गलत हो जाता है यदि आप प्लगइन्स का उपयोग करेंगे? दोह!

@ सात-चरण-अधिकतम मेरे उपकरण बहुत गड़बड़ हैं। अगर मैं कम कमांड लाइन तर्कों को नियंत्रित कर सकता हूं तो मैं शायद प्लगइन्स का उपयोग करूंगा। (या एक मास्टर प्लगइन है जहां मैं सब कुछ सामान करता हूं) लेकिन नहीं, मैंने अपना पर्यावरण खराब कर दिया है, और मेरे पास एक्लिप्स कार्यक्षेत्र में ~ 100 WP थीम हैं, जिनसे मैं छुटकारा नहीं पा सकता क्योंकि सभी बिल्ड कमांड आदि वहां फंस गए हैं। .

@Ciantic सबसे पहले आपको कस्टम फ़ंक्शन प्लगइन का उपयोग करने के लिए किसी विशेष कमांड लाइन विकल्प की आवश्यकता नहीं है - यदि आवश्यक हो (# 2479)। माध्यमिक मुझे संदेह है कि जो भी गहरा खराब वातावरण आपको कंपाइलर विकल्पों को नियंत्रित करने के लिए प्रतिबंधित करता है (आखिरकार lessc "निष्पादन योग्य" केवल एक ओएस कंसोल स्क्रिप्ट है जो वास्तविक नोड स्क्रिप्ट पर रीडायरेक्ट कर रहा है - इसलिए कोई भी आसानी से _anything_ को एक तरफ या किसी अन्य तरीके से इंजेक्ट कर सकता है)।

किसी भी तरह से मेरी टिप्पणी "कॉपी और पेस्ट करने योग्य बनाम प्लगइन्स" के बारे में थी सलाह। जबकि यह टूटे हुए निर्माण उपकरण/श्रृंखला के लिए सिर्फ एक कामकाज साबित हुआ है।

@ सात-चरण-अधिकतम आयात प्लगइन बिल्कुल वही उपकरण दिखता है जिसकी मुझे आवश्यकता है! हालांकि मैं अपनी परियोजना के अंदर कार्यों को परिभाषित करना चाहता हूं, वैश्विक रजिस्ट्री में नहीं, इस तरह मैं परियोजना के भीतर कार्यों को संपादित कर सकता हूं और अगर मैं वैश्विक फ़ंक्शन में बदलाव करता हूं तो अरबों कम फाइलों को तोड़ने की चिंता नहीं करता।

@Ciantic

हालांकि मैं अपनी परियोजना के अंदर कार्यों को परिभाषित करना चाहता हूं, वैश्विक रजिस्ट्री में नहीं, इस तरह मैं परियोजना के भीतर कार्यों को संपादित कर सकता हूं और अगर मैं वैश्विक फ़ंक्शन में बदलाव करता हूं तो अरबों कम फाइलों को तोड़ने की चिंता नहीं करता।

आगे पढ़ें। मेरे पुल अनुरोध का प्रारंभिक मसौदा वैश्विक पंजीकरण का आसान मार्ग था, लेकिन कुछ प्राप्त अंतर्दृष्टि के साथ मैंने बाद में इसे स्कोप-स्थानीय पंजीकरण करने के लिए परिष्कृत किया। उदाहरण के लिए

.my-mixin() {
  <strong i="10">@plugin</strong> "my-func.js";
  <strong i="11">@value</strong> : my-func();
}

मिश्रण के दायरे से बाहर my-func लीक नहीं होगा। पथ उस फ़ाइल के सापेक्ष भी हैं जिसमें @plugin घोषणा शामिल है, इसलिए सब कुछ बड़े करीने से बंडल किया गया है और तीसरे पक्ष द्वारा उपभोग के लिए शिप किया जा सकता है; १००% _पारदर्शी_।

इस सुविधा के लिए यही मेरा डिज़ाइन लक्ष्य था। ^_^

कस्टम रंग संयोजन जोड़ने के लिए less.js की आवश्यकता है
कोड कमिट करने के दौरान समस्या होती है
यह समर्थन कर रहा है लेकिन कम की जरूरत है।js

मुझे एक हैक मिलता है: यदि आप वैश्विक जेएस फ़ंक्शन घोषित करते हैं, तो आप इसे बाद में उपयोग कर सकते हैं!

<strong i="7">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="8">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevain मैं @fn में कम कार्यों का उपयोग कैसे कर सकता हूं? जैसे hsvsaturation 、 unit और इसी तरह .Thx।

@hiyangguo

आपको इनलाइन JS एक्सप्रेशन, अवधि का उपयोग नहीं करना चाहिए।
कस्टम फ़ंक्शंस को उचित तरीके से बनाएं और पंजीकृत करें।
दस्तावेज़ीकरण पढ़ें। यह सब वहाँ है: http://lesscss.org/features/#plugin -atrules-feature

@rjgotten ठीक है, बहुत बहुत धन्यवाद।