Less.js: إنشاء وظائف مخصصة

ربما للتمييز بينه وبين المزج والبقاء أقرب إلى بناء جملة CSS ، يمكن أن يكون:

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

نوع من المتغير الذي يعتمد على المعلمات (والتي إذا كنت تعتقد أنها نوع من وظيفة =)

+1 بناء جملة souldreamer .

ولكن معsouldreamer الصورة جملة ذلك عوا لا يكون POSIBLE لكتابة بعض
القيم إلى المتغيرات واستخدامها مرة أخرى.

قد تستخدم بناء الجملة هذا:

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

النهج الثاني هو استخدام الخلطات. نظرًا لأن المحول البرمجي يتعامل مع mixins كوظائف JavaScript على أي حال ، فإن إضافة ميزة return إلى mixins_ من المحتمل أن يكون علاجًا بسيطًا. إليك ما سيبدو عليه الأمر:

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

تقدم "التوجيهات الوظيفية" لـ SASS نتيجة مماثلة ، على الرغم من أنني أعتقد أن حل mixin سيكون أكثر أناقة.

المسألتان 508 و 609 مرتبطة بهذا أيضًا.

أعتقد أن الصيغة الثانية لـ tylertate ستكون الأفضل. أنا طبقات لتكون أسهل لأنه كما قلت بالفعل أقل يوزع مزيج مثل جافا سكريبت.

هل تعتقد أن هذا ممكن مع mixins؟

.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 للمكوِّن الإضافي المحدد ، وأنقل منطق البرمجة إلى مكون JavaScript LESS الإضافي. هذه الاقتراحات غير متسقة مع بناء الجملة الحالي 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);}}};

في الوقت الحالي ، لا توجد طريقة لإضافة وظائف في إصدار العقدة ، ولكن يجب أن يكون هناك

شكرًا ، أقدر الاستجابة والموقف الذي يسمح لي بإخراج JavaScript من بناء جملة LESS.

ومع ذلك ، فإن عدم الاضطرار إلى ربط قيمة إرجاع mixin بخاصية معينة يبدو وكأنه حالة استخدام واضحة. أي شخص يستخدم شبكة سيرغب في فعل ما كان يحاول Deltachaos القيام به. سيكون من الرائع أن تكون قادرًا على تحقيق ذلك دون النزول إلى مستوى إنشاء مكون إضافي.

إنه أمر صعب - إذا كنت بحاجة إلى وجود حلقات أو إذا كان يلزمك العيش في مكون إضافي.

ومع ذلك ، إذا كان يستدعي 3 وظائف أقل بقيم محددة ، فأنا أوافق على أنه من المنطقي أن تكون قادرًا على استخراج ذلك من الداخل لجعل بناء الجملة جافًا - ليس من المنطقي أن تضطر إلى كتابة مكون إضافي لاستخراج حقيقة ذلك تريد تعتيم بنسبة 5٪ في مكان واحد.

لقد أعدت فتحه ولكن قد يتكرر هذا في مكان آخر ، سنرى.

في الوقت الحالي ، يتم نسخ جميع المتغيرات من نطاق mixins إلى النطاق الخارجي - وهو نوع من طريقة لإرجاع المتغيرات .. لكنها تسبب مشاكل مروعة وأريد إزالتها.

نسخة مكررة من # 538

"يتم نسخ جميع المتغيرات من نطاق mixins إلى النطاق الخارجي"

هتاف اشمئزاز ، حقا؟ نعم ، دعنا نزيل هذا السلوك. أفضّل وضع علامة على المتغيرات للتصدير ، أو أي شيء آخر غير التسريب التلقائي فقط. هذا ليس سلوكًا متوقعًا بالنسبة لي. يجب أن تكون المتغيرات في نطاق الكتلة.

نعم ، مثل وظائف الدعم عبر خلل في الباب الخلفي

أجد اختراقًا: إذا أعلنت عن وظيفة js عالمية ، فيمكنك استخدامها لاحقًا!

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

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

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

وجد fabienevain نفس الاختراق الآن :)

fabienevain إنها تعمل بشكل جيد ، شكرًا ~: +1:

لقد اكتشفت أنه يمكنك إنشاء وظائف فعلية من نفس سجن Eval من خلال الوصول إلى process.mainModule ... إلا أن المصيد الوحيد هو أنك قد تضطر إلى تكرار ما يزيد عن 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 ، والذي يحتوي على تفاصيل مثيرة مثل الملف الذي تتم معالجته حتى تتمكن على سبيل المثال من إنشاء استيراد uri لبيانات svg مع الإعدادات وما إلى ذلك.

تحرير أتساءل لماذا يتم إدخال backticks حتى إذا تم محاولة استبعاد JS. أنا أحب أقل نسخها ولصقها قدر الإمكان ، لذا فإن المكونات الإضافية ليست جيدة بالنسبة لي.

أنا أحب أقل نسخها ولصقها قدر الإمكان ، لذا فإن المكونات الإضافية ليست جيدة بالنسبة لي.

لذلك تفترض أن الكود الخاص بك _is_ "نسخ ولصق" حتى إذا كنت تحتاج إلى برنامج التحويل البرمجي less.js المستند إلى node.js في عمليات اختراق backtick المضمنة ، ولكن في نفس الوقت تشعر أنه يحدث خطأ إذا كنت ستستخدم المكونات الإضافية؟ دوه!

@ Seven -hase-max أدواتي معطلة جدًا. إذا كان بإمكاني التحكم في وسيطات سطر الأوامر lessc ، فسأستخدم الإضافات على الأرجح. (أو لديك مكون إضافي رئيسي واحد حيث أقوم بحشو كل شيء) ولكن لا ، لقد أفسدت بيئتي ، ولدي حوالي 100 سمة WP في مساحة عمل Eclipse والتي لا يمكنني التخلص منها لأن جميع أوامر الإنشاء وما إلى ذلك عالقة هناك .

Ciantic بادئ ذي بدء ، لست بحاجة إلى أي خيارات سطر أوامر معينة لاستخدام مكون إضافي للوظائف المخصصة - إذا لزم الأمر (# 2479). ثانوي أشك في أن أي بيئة مشدودة بشدة تمنعك من التحكم في خيارات المترجم (بعد كل شيء ، فإن "الملف القابل للتنفيذ" lessc هو مجرد برنامج نصي لوحدة التحكم في نظام التشغيل يعيد التوجيه إلى نص عقدة فعلي - لذلك يمكن بسهولة حقن أي شيء هناك بطريقة أو بأخرى).

في كلتا الحالتين ، كان تعليقي حول "النسخ واللصق مقابل المكونات الإضافية" بينما اتضح أنه مجرد حل بديل لسلسلة / أدوات بناء معطلة.

يبدو البرنامج المساعد لاستيراد @ seven-stage-max بالضبط الأداة التي أحتاجها! على الرغم من أنني أرغب في تحديد الوظائف داخل مشروعي ، وليس في السجل العالمي ، بهذه الطريقة يمكنني تحرير الوظائف داخل المشروع وعدم القلق بشأن كسر مليار ملف أقل إذا قمت بإجراء تغيير على الوظيفة العامة.

تضمين التغريدة

على الرغم من أنني أرغب في تحديد الوظائف داخل مشروعي ، وليس في السجل العالمي ، بهذه الطريقة يمكنني تحرير الوظائف داخل المشروع وعدم القلق بشأن كسر مليار ملف أقل إذا قمت بإجراء تغيير على الوظيفة العامة.

اقرأ المزيد في. ذهبت المسودة الأولية لطلب السحب الخاص بي إلى الطريق السهل للتسجيل العالمي ، ولكن مع بعض الأفكار المكتسبة ، قمت بتنقيحها لاحقًا للقيام بالتسجيل المحلي على نطاق النطاق. على سبيل المثال

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

لن يتم تسريب my-func خارج نطاق mixin. المسارات هي بالطبع مرتبطة أيضًا بالملف الذي يحتوي على تصريح @plugin ، لذلك يتم تجميع كل شيء بدقة وقابل للشحن للاستهلاك من قبل أطراف ثالثة ؛ 100٪ _شفافية_.

كان هذا هدفي التصميمي لهذه الميزة. ^ _ ^

يحتاج less.js إلى إضافة مزيج ألوان مخصص
تحدث مشكلة أثناء الالتزام بالكود
إنه يدعم ولكنه بحاجة إلى 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 وهكذا.

تضمين التغريدة

يجب ألا تستخدم تعبيرات JS المضمنة ، النقطة.
بناء وتسجيل الوظائف المخصصة بالطريقة المناسبة.
اقرأ الوثائق. كل شيء هناك: http://lesscss.org/features/#plugin -atrules-feature

rjgotten حسنًا ، شكرًا جزيلاً لك.