Less.js: إضافة دعم للمتغيرات "الافتراضية" (على غرار! الافتراضي في SASS)

انظر التوثيق .

تحديث: أزلت تعليقي السابق على هذا المنشور لعدم إرباك الزائرين المستقبليين (هنا كنت أحاول الإجابة عن سؤال "كيفية تحديد متغير إذا لم يكن محددًا بالفعل" وفاتت النقطة التي تعتبر "مشكلة س ص" والإجابة الصحيحة Sass-like !default هو: في أقل لا تحتاج إلى أي شيء من هذا القبيل لأن الوظيفة الضرورية ("(إعادة) التعريف بعد الاستخدام") متوفرة بالفعل بالطريقة التي تعمل بها المتغيرات الأقل).

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

مكتبة

<strong i="7">@width</strong>: 0;
.mixin {
  width: @width;
}

user.less:

<strong i="11">@import</strong> "library.less"; //first declaration of <strong i="12">@width</strong>
<strong i="13">@width</strong>: 1; //this will override <strong i="14">@width</strong> defined previously
.class {
  .mixin();
}

يجمع إلى:

.mixin {
  width: 1;
}
.class {
  width: 1;
}

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

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

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

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

نود المساهمة بميزات أخرى في Less مع استمرارنا. أعتقد أن حالة الاستخدام واسعة النطاق (بشكل غير عادي؟) يمكن أن تكون مفيدة للتحقق مما هو مطلوب لتوسيع نطاق اللغة / مجموعة الميزات.

آمل أن تفكر في دمج هذا أو تقديم بعض البدائل الأكثر وضوحًا في طبيعتها. إن استغلال حيل النطاق لن ينفعنا حقًا.

شكرا مرة أخرى على وقتك واهتمامك!

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

فقط للتوضيح نحن نتحدث عن المتغيرات هنا فقط. وليس لدينا ورقة أنماط رئيسية - لدينا واحدة لكل فصل لكل موضوع. :)

ربما لا أتبع اقتراحك ولكن على سبيل المثال ، يبدو أحد ملفات المتغيرات الخاصة بالسمات كما يلي:

$panel-base-color: $neutral-light-color !default;
$panel-header-color: $base-color !default;
$panel-frame-border-width: 1px !default;
$panel-header-font-size: round($font-size * 1.15) !default;
$panel-body-border-color: $neutral-dark-color !default;

$panel-light-header-color: #000 !default;
$panel-light-header-background-color: #fff !default;
$panel-light-tool-background-image: 'tools/tool-sprites-dark' !default;
$panel-light-body-border-color: $neutral-dark-color !default;
$panel-ignore-frame-padding: true !default;

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

يتكرر هذا النمط _ الكثير_ :)

حسنًا ، حسنًا ، لماذا لا تقوم فقط بتجاوز @panel-base-color في الورقة الأقل الرئيسية الخاصة بك؟ تعد المتغيرات الأقل عالمية ، لذا فإن أيًا منها يحدث أخيرًا هو الفائز.

<strong i="7">@import</strong> 'theme.less';

@panel-base-color: red;

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

ليس لدينا "ورقة رئيسية أقل" :) أقدر مساعدتك واقتراحاتك ، لكننا أجرينا العديد من المناقشات حول هذا الأمر داخليًا وهم يميلون إلى الاستمرار قليلاً. يكفي أن نقول إننا نعتقد أننا بحاجة إلى إعداد متغير افتراضي كما اقترحنا هنا. هذه الميزة موجودة في Sass ووجدناها مفيدة جدًا في تقليل التعقيد وتوفير المرونة للمستخدمين في تكوين سماتنا.

لدي فضول لمعرفة ما إذا كان كل هذا يعني أنه سيتم قبول طلب السحب هذا أو بعض المشتقات المماثلة؟ سنكون سعداء لتعديل بناء الجملة إذا كان ذلك غير مقبول.

ليس لدينا "ورقة رئيسية أقل" :)

ببساطة استبدل "الورقة الرئيسية الأقل" في الإجابات أعلاه بعبارة "أي من الأوراق الأقل للمستخدم". حتى الآن يبدو أن SASS !default (أيا كان تركيبه) قد تم اختراعه لحل مشكلة غير موجودة في LESS.
dongryphon ، قد أكون مخطئًا بالطبع ، لكنك لم تحدد سبب عدم إمكانية استخدام الحل الذي اقترحه SomMeri وSoviut.

بعبارة أخرى ، تخيل أنك لم تكن تستورد وبدلاً من ذلك كان لديك كل متغيراتك في نفس الورقة. هذا ما يفعله الاستيراد بشكل فعال. لذلك في هذه الحالة ، إذا كان لديك إعلانان متغيران يحملان الاسم نفسه ، فإن آخر إعلان في الورقة سيفوز.

@base-color: green;

div {
    background: @base-color;
}

@base-color: red;

لأنه يتم الإعلان عن اللون الأساسي مرة أخرى في النهاية ، سيتحول اللون الأساسي المستخدم في div إلى اللون الأحمر. سيتم تجميعها إلى:

div {
    background: red;
}

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

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

لا يمثل ذلك عبئًا كبيرًا على مستخدمي المكتبة ليقولوا إنهم يتجاوزون المتغيرات بعد الاستيراد (أو استيراد ملف المتغيرات بعد الاستيراد) مقابل إضافة المزيد من البنية إلى أقل .. نعتقد أن هذا أحد مزايا الأقل ، التي يمكنك تفعل نفس القدر مثل sass ولكن في معظم الأحيان مع بناء الجملة أبسط.

هذا يتعارض مع ما قد يعتقده مبرمج JavaScript ، ولكن الفكرة وراءه هي أنه أقرب إلى css.

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

انظر # 1109 # 1104 # 313

وللتوضيح فقط ، نحن لا نقول "لا" بأي حال من الأحوال. نحن نحاول إظهار أن هذه الميزة قد تكون موجودة بالفعل.

أضفت بعض المعلومات إلى مستندات أقل

إغلاق كما هو متاح بالفعل (في "طريقة أقل") الميزة (http://lesscss.org/features/#variables-feature-default-variables).

أعتقد أن هذا الالتباس يحدث غالبًا لأنه في حين أن هناك تداخلًا في بناء الجملة ، فإن SASS "ينفذ" من أعلى إلى أسفل ولكن LESS لا يفعل ذلك ، وبدلاً من ذلك يعمل مثل CSS. LESS مثل CSS + (CSS مع ميزات إضافية) ، و SASS مثل "PHP مع بناء جملة CSS". أتساءل عما إذا كانت هناك طريقة (إذا لزم الأمر) يمكننا من خلالها التمييز.

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

لأننا نعلم مستخدمي المكتبة (والمستهلكين) ألا يقوموا أبدًا بتعديل رموز المكتبة بأنفسهم. الميزة المفقودة !default تعني أنه يتعين علينا القيام بأحد هذين الأمرين - كلاهما سيء بشكل متساوٍ:

• يتعين على المستخدمين تحرير ورقة أنماط المكتبة بأنفسهم من أجل تحرير المتغيرات حيث يتم الإعلان عنها (وهو نوع من الأشياء المحظورة ، مما يجعل تحديثات المكتبة أكثر صعوبة) أو ،
• يجب أن توفر المكتبة ورقتي أنماط: واحدة للمتغيرات الافتراضية والأخرى للقواعد الفعلية. ثم يتعين على المستخدم استيراد المتغير الأول ، ثم التصريح عن المتغيرات الخاصة به ، ثم @ استيراد المتغير الثاني. إنه أكثر تعقيدًا مما ينبغي ، خاصةً الاحتفاظ بهذين الملفين في نفس الإصدار.

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

my-color: red;
<strong i="15">@import</strong> "./my-library.less";

بدلا من:

<strong i="19">@import</strong> "./my-library-variables.less";
my-color: red;
<strong i="20">@import</strong> "./my-library-rules.less";

أعتقد أنه يجب عليك إعادة النظر في هذه المسألة.

arcanis في الواقع لا أستطيع أن أفهم لماذا تعتقد أن:

يجب أن توفر المكتبة ورقتي أنماط: واحدة للمتغيرات الافتراضية والأخرى للقواعد الفعلية.
يعني أسلوب sass أن المكتبة يجب أن توفر ملفًا واحدًا فقط

في Less إنه نفس تصميم المكتبة تمامًا:

<strong i="11">@import</strong> "./my-library.less";
@my-color: red;

أعتقد أنك ببساطة تفتقد الشيء "Lazy-Loading" (ويتم استخدام نفس المثال بالضبط في المستندات ليقول no, thanks! إلى !default ).

أعتقد أنك ببساطة تفتقد الشيء "التحميل البطيء"

@ سبع مراحل كحد أقصى WTF ، أنت على حق. Dang it ، ربما ينبغي علي حذف ردي بالكامل (وفعلت للتو). أنت تخبرني أنه يمكنك استيراد bootstrap ، وتجاوز فقط متغيرات معينة ، وستعمل فقط؟

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

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

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

ربما يكون سبب حصولنا على العديد من الطلبات لميزة !default في Less هو أن قلة من الناس يستشعرون هذه الميزة أو يفهمونها من المثال المختصر من المستندات (بما فيهم أنا ، بشكل واضح).

على أقل تقدير ، شكرًا لشرحها مرة أخرى @ سبع مراحل كحد أقصى!

Woops. حسنًا ، أنت على حق. لقد أسأت فهم المستندات أيضًا ، يا سيئ!

Soviut أنت عبقري يا إلهي! لم يكن لدي فكرة عن التصريحات المتغيرة التي تعمل بهذه الطريقة في SASS / LESS. شكرا لك!

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

لاحظ أيضًا: spikesagal فيما يتعلق ببيانك: "لم يكن لدي فكرة أن التصريحات المتغيرة تعمل بهذا الشكل في SASS / LESS" - على حد علمي ، فإن سلوك المتغيرات ليس هو نفسه بين اللغتين ، حيث يقوم SASS و LESS بتقييم الأشياء بشكل مختلف تمامًا.

وهم يقتلون هذه الميزة في BS4 بسبب الانتقال إلى Sass ...: -1: ما زال حزينًا جدًا بشأن هذه الخطوة.

لذلك بدأ الكفاح من أجل المزيد! المتغيرات الافتراضية: [twbs / bootstrap # 17418]

حسنًا ، لا يمكنهم قتل ميزة أقل عن طريق تغيير مصادر SCSS بأي طريقة. (من الناحية الفنية ، إنها ليست "ميزة" (مثل نوع من "السلوك المركب") ولكنها خاصية أساسية / نتيجة طبيعية للتقييم الكسول). طالما أن هناك إصدارًا أقل من BS (هذه مجرد مسألة عدد الأشخاص المستعدين للمساهمة فيها) ، وهناك متغير عالمي واحد على الأقل - ستتمكن دائمًا من تجاوز هذا المتغير.

نحن سوف. انتقل الإصدار v4-alpha الرسمي من bootstrap إلى Sass. هذا ، على الأقل في فهمي ، يقتل أقل في وثائقهم الرسمية - وهذا يعني أيضًا قتل دعم هذه الميزة لأن Sass ليس لديه شيء مثل متغيرات التحميل الكسول. إنهم يدعمون فقط! الافتراضي ، والذي يعني بطريقة ما: "حسنًا ، نسمح لك بتجاوز متغيراتنا مرة واحدة فقط من الخارج ، وفقط إذا سمحنا بذلك. لذا ، إذا نسينا منحك حق الوصول إلى متغير عن طريق حذف! الافتراضي ببساطة ، فأنت مشدود إلى حد كبير وعليك تجاوز محدد الرتق بالكامل في ملفاتك. تعامل معه. "

وهذا يعني أيضًا قتل دعم هذه الميزة لأن Sass ليس لديه شيء مثل متغيرات التحميل الكسول.

حسنًا ، هذا يعني فقط "أنهم يقتلونها في Bootstrap" (والذي من الواضح أنه شيء خارج نطاق هذا الموضوع - طالما أنه لا يوجد إصدار أقل من BS ، فلا يجب أن نهتم بأي ميزات Bootstrap في هذا المستودع ، هل يجب علينا ذلك؟).

نظرًا لأن هذه المناقشة كانت إلى حد كبير حول تجاوز المتغيرات في التمهيد ...

نحن نتمسك بالقليل: ابتسم:

لدي حالة استخدام للمعضلة المذكورة في الأصل. ضع في اعتبارك المثال المبسط التالي:

1. لدي ملف أقل يحدد حجم خط h1 ، شيء من هذا القبيل
   <strong i="8">@font_size__h1</strong> = 30px;
2. لدي (لعدم وجود عبارة أفضل) مكون إضافي يحتوي على ملف LESS منفصل يستخدم الإعلان @font_size__h1 . لذلك أنا <strong i="12">@import</strong> (reference) "path/to/file.less"; ذلك. لا مشكلة ، إنه متوفر الآن.
3. الآن آخذ هذا "المكون الإضافي" إلى موقع جديد لا يحتوي على @font_size__h1 معرّف في أي مكان. في هذه المرحلة ، سيكون من الرائع أن نقول "إذا تم تعريف @font_size__h1 ، فاستخدم هذه القيمة. إذا لم يتم تعريفها ، فاستخدم القيمة التي أحددها هنا."

العنصر 3 غير ممكن حاليًا ، بقدر ما أستطيع رؤيته.

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

العنصر 3 غير ممكن حاليًا ، بقدر ما أستطيع رؤيته.

لا يبدو أنك قرأت الموضوع:

<strong i="10">@import</strong> "path/to/file.less";
<strong i="11">@import</strong> "here.less"; // if it's not defined <elsewhere>, then use the value I define <here>
<strong i="12">@import</strong> "elsewhere.less";

والتي بالطبع يمكن اختزالها إلى:

<strong i="16">@import</strong> "path/to/file.less"; // <- define default value there
@font-size-h1: foo;          // if it's not defined here then use the value defined above

وهو في الأساس نفس المثال http://lesscss.org/features/#variables -feature-default-variables

نعم قرأت الموضوع. يبدو أنك لا تفهم ما أطرحه ، لأن مثالك يحتوي على سؤالي إلى الوراء.

والتي بالطبع يمكن اختزالها إلى:
import "path / to / file.less" ؛ // <- حدد القيمة الافتراضية هناك
@ font-size-h1: foo؛ // إذا لم يتم تعريفها هنا ، فاستخدم القيمة المحددة أعلاه

هذا عكس ما أحتاجه. سيؤدي هذا إلى استبدال قيمة @font-size-h1 بـ path/to/file.less بالقيمة المحلية بغض النظر عن السبب. ما أحتاجه هو القيمة الموجودة في الملف المحلي التي يتم استخدامها فقط إذا:
أ) لم يتم تحميل path/to/file.less ، أو
ب) قيمة '@ font_size__h1 is not set in path / to / file.less`

IOW ستكون القيمة المحلية @font-size-h1: foo; موجودة دائمًا في الملف المحلي ، ولكن يجب تجاوزها إذا تم تعيينها على path/to/file.less

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

شكرا على كل حال.

يبدو أنك لا تفهم ما أطلبه

أفضل أن أقترح عليك أن تبدأ ببعض الأساسيات الأقل تغيرًا لتحديث العرض الخاص بك:

• التقييم الكسول
• دلالات متغيرة
• الأكثر سوء فهم في العالم ...

(لأنه يبدو أنك تحاول فقط التفكير في الأمر كله بطريقة حتمية شبيهة بلغة C / PHP ، بينما في Less / CSS يكون الأمر "تصريحيًا مقلوبًا" تمامًا).
لقد تم الحديث عن الموت طوال هذه السنوات ، !default يمكن أن يضيف _لا شيء_ جديد إذا ما قورنت بالمتغير الأصلي الأقل متغيرًا. فترة. (لقد مررنا عدة مرات من قبل: إذا اعتقد المرء أنه وجد حالة استخدام لـ !default في أقل ، فهذا لا يعني شيئًا سوى سوء فهمه للدلالات الأقل تغيرًا).

ما أحتاجه هو القيمة الموجودة في الملف المحلي التي يتم استخدامها فقط إذا:
أ) لم يتم تحميل path/to/file.less ، أو
ب) لم يتم تعيين قيمة @ font_size__h1 في path/to/file.less

ثم العكس هو الصحيح:

@font-size-h1: foo;
<strong i="27">@import</strong> "path/to/file.less"; 

تادا!

... وهو المكان الذي هبطت فيه ، كما قلت.

كنت سأقترح المقال الذي كتبته ثم رأيت أن @ Seven-stage-max قد تم ربطه به. 😄 ثق بنا ، ما تطلبه موجود بالفعل! لكن عليك أن تفهم تقييم ليس المتغير لفهم كيف / سبب وجوده.

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

app.less
/grid/grid.less

نظرًا لأن الشبكة عبارة عن مكون ، انسَ إضافة أي شيء هنا - أو إضافة أي رمز بعد ملف grid.less.
لا أرى كم أقل يغطي هذه المشكلة. تقدم Scss هذه الميزة لسبب وجيه.

@ geri777

ولكن إذا تم تحديد متغير معين من الخارج بالفعل ، فيجب أن يكون له الأولوية.

تقييمات أقل مثل CSS.

.css {  
  --color: blue;
  color: var(--color);  // --color will be red
  --color: red;
  border-color: var(--color);  // --color will still be red, red is the scope's final value
}

.less {  
  <strong i="10">@color</strong>: blue;
  color: @color;  // <strong i="11">@color</strong> will be red
  <strong i="12">@color</strong>: red;
  border-color: @color;  // <strong i="13">@color</strong> will still be red, red is the scope's final value
}
````

Scss, instead, doesn't mimic CSS evaluation and instead evaluates more like, say, PHP.

```scss
.scss {  
  $color: blue;
  color: $color;  // $color will be blue
  $color: red;
  border-color: $color;  // $color will be red
}

لذلك ، في Sass / SCSS ، من أجل تجاوز قيمة متغير الجذر ، فأنت مجبر على القيام بأمرين:

1. يجب أن تقوم بتمييز كافة تعريفات المتغيرات بـ !default
2. يجب عليك إدراج المتغيرات العمومية الخاصة بك قبل هذه التعريفات الافتراضية.

كما في:

// main.scss
<strong i="22">@import</strong> "overrides.scss";
<strong i="23">@import</strong> "library.scss";

// overrides.scss
$color: red;

// library.scss
$color: blue !default;

.scss {
  color: $color;
}

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

// main.less
<strong i="27">@import</strong> "library.less";
<strong i="28">@import</strong> "overrides.less";

// overrides.less
<strong i="29">@color</strong>: red;

// library.less
<strong i="30">@color</strong>: blue;

.less {
  color: @color;
}

لذلك ، لا تحتاج إلى !default لأن Less سيقبل دائمًا القيمة النهائية.

فكر في تقييم أقل مثل سلسلة CSS. إنه يعمل فقط. الإعلان النهائي يفوز.