css معنى خطأ اسم المتغير "غير معرف" على الرغم من أن "variables.less" يتم استيراده




less معنى (10)

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

@media (min-width: @aVariable) {
    .some-class{
        margin: 10px;

        @media (min-width: @anotherVariable) {
            margin: 20px;
        }
}

... عندئذٍ سيخبرك dotless أنه لا يمكن العثور على تعريفanotherVariable ، حتى لو تم استخدامه ثلاثة أسطر أعلاه.

https://code.i-harness.com

لقد بدأت باستخدام LESS اليوم. لكنه غريب نوعا ما. هذا الرمز لا يعمل. لقد تلقيت خطأ:

! Variable Name Error: @linkColor in a is undefined.

بلدي التمهيد:

@import "variables.less";
@import "normalize.less";

variables.less:

@linkColor:             #08c;
@linkColorHover:        darken(@linkColor, 15%);

normalize.less:

a {
    color: @linkColor;
}
a:visited {
    color: @linkColor;
}
a:hover {
    color: @linkColorHover;
}

عندما اصنع

import "variables.less"

في ملف normalize.less ، كل شيء يعمل بشكل جيد.

شكرا لمساعدتك :)


أعتقد أن السبب في ذلك هو الملف الرئيسي الأقل الذي تقوم بتجميعه. بطريقة مماثلة

إذا كان لديك أقل / Project_name / project.less وفي هذا project.less يمكنك استيراد المتغير أقل وجميع الملفات الأخرى التي لديها في الدليل.

عليك فقط ترجمة project.less إلى css الخاص بك ، وليس كل الملفات الأقل. إذا حاولت ترجمة project.less و variables.less في وقت واحد ، فسوف يكون لديك هذا الخطأ. ويمكنك تجنب التصريح الزائد عن استيراد المتغير الأقل من الملفات


أود استخدام القواعد المتداخلة في normalize.less:

a {
     color: @linkColor;

     &:visited {color: @linkColor;}

     &:hover {color: @linkColorHover;}
}

وفيimport ، لا تحتاج إلى استخدام ".less" ، إنه اختياري:

@import "variables";
@import "normalize";

لا أعرف إذا كان هذا يمكن أن يساعد ...


بالنسبة لي حدث ذلك عند استخدام @ استيراد مرة واحدة ولا شيء مساعدة. ولكن معImport عملها.

كما قرأت في الإصدار الأخير من "أقل الاستيراد" ستعمل استيراد مرة واحدة.


قد يكون هناك سبب جذر آخر ممكن.

هنا هو بلدي Gruntfile.js الأصلي:

less: {
      compile: {
        files: {
          'css/less.css': 'less/**/*.less'
        }
      }
    },

يجعل حرف البدل المترجم LESS ترجمة جميع الملفات .less ضمن هذا المجلد ودمج جميع النتائج في CSS واحد. وحصلت على أخطاء تشغيل grunt less:compile :

NameError: .transition غير معرف في أقل / core / html.less على السطر 38 ، العمود 3

بمجرد أن قمت بتغيير 'less/**/*.less' إلى 'less/css.less' ، نجح التجميع.


لمساعدة أي شخص آخر قد يصادف هذا لا يريد إنشاء CSS مكرر من واردات متعددة ، لديك خياران.

  1. إما @ استيراد - مرة واحدة المتغيرات / يمزج الملفات التي تحتاجها في كل ملف تحتاج إلى استخدامها في.

    استخدم @import-once "filename.less"; لمنع التكرارات.

  2. الترقية إلى LESS> 1.4.0 ، عندما يصل ؛ من الموقع الأقل:

    "The statement @import acts differently before and after 1.4.0. It acts as @import-multiple in all older versions and as @import-once in all less.js versions after 1.4.0."


واجهت نفس المشكلة باستخدام مترجم Winless.

بعض الملفات .less التي كنت أستوردها إلى ملف master.less كانت فارغة. عندما قمت بإزالة هذه من قائمة الملفات المستوردة تم التعرف على المتغيرات الخاصة بي!


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

لقد واجهت هذه المشكلة أيضًا ، عند استخدام طبقات متعددة من الاستيراد ، ومترجم 'lessc' من Node.js:

  • استورد الملف الأصلي ملفًا (والذي سوف نسميه "تابع")
  • قام الملف الفرعي باستيراد ملف (والذي سوف نسميه "حفيد")
  • تم استيراد الحفيد

لقد حاولت ترجمة الملف الأصلي ، وتلقيت نفس السلوك "متغير غير معروف". أستطيع أن أرى أن المتغير تم تعريفه في الطفل وأن بناء الجملة بدا صحيحًا.

لم يتم عرض أي أخطاء سابقة.

تبين أن المشكلة لم تكن تستورد الحفيد بشكل صحيح. أي،

@import grandchild.less

عوضا عن:

@import "grandchild.less";

إصلاح الطفل الذي يستورد الحفيد جعل الأصل يرى المتغيرات المحددة في الطفل.

هذا يبدو وكأنه خطأ في أقل - أي أن الاستيراد السيئ يجب أن يظهر في ناتج 'lessc' ، لذلك في يوم من الأيام سيكون ثابتًا. حتى ذلك الحين ، آمل أن يساعد هذا.


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

ملاحظة: أنا أستخدم django compress

في index.html كان لدي:

{% compress css %}
<link href="{{ STATIC_URL }}less/timepicker.less" rel="stylesheet" type="text/less">
<link href="{{ STATIC_URL }}less/style.less" rel="stylesheet" type="text/less">
{% endcompress %}

ثم في الأنماط. لم يكن لدي

...
@import "timepick.less";

هذا السؤال الآخر قادني في النهاية إلى الإجابة الصحيحة.

يبدو أن برنامج التحويل البرمجي LESS يفشل بصمت إذا تم تشفير الملفات باستخدام BOM. (هذا هو علامة ترتيب البايت لأولئك غير المطلعين على المصطلح.) هذا هو الإعداد الافتراضي في بعض برامج التحرير ، مثل Visual Studio.

يترجم المحول البرمجي خطأً في BOM إذا كان موجودًا في ملفك الجذر ، ولكن يبدو أنه فشل بصمت لملف @ import-ed.

حاول حفظ ملفاتك كـ UTF-8 بدون BOM ، ومعرفة ما إذا كان ذلك يحل مشكلتك.





less