Less.js: يتم دمج استعلام الوسائط المتداخلة غير صالح مع الشرط "أو" ، عند استخدام متغير لاستعلام الوسائط الفرعية

تم إنشاؤها على ٢٠ سبتمبر ٢٠١٦ · 5تعليقات · مصدر: less/less.js

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

أقل:

<strong i="7">@highdpi</strong>: ~"(-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx)";
.bg {
    <strong i="8">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        <strong i="9">@media</strong> <strong i="10">@highdpi</strong> {
            background: url([email protected]);
        }
    }
}

انتاج:

<strong i="14">@media</strong> (max-width: 1000px) {
  .bg {
    background: url(bg-small.png);
  }
}
<strong i="15">@media</strong> (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) {
  .bg {
    background: url([email protected]);
  }
}

الإخراج المتوقع - "(max-width: 1000px) و" قبل كل جزء مفصول بفاصلة:

[...]
<strong i="19">@media</strong> (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25), (max-width: 1000px) and (min-device-pixel-ratio: 1.25), (max-width: 1000px) and (min-resolution: 1.25dppx) {
[...]

_من ناحية أخرى ، فإنها تجمع بشكل جيد ، عند عدم استخدام متغير: _

.bg {
    <strong i="23">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        <strong i="24">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) {
            background: url([email protected]);
        }
    }
}

consider closing feature request needs decision stale

مصدر

falkenhawk

👍2

التعليق الأكثر فائدة

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

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

.highdpi(@rules) {
    <strong i="10">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), 
           (min-device-pixel-ratio: 1.25), 
           (min-resolution: 1.25dppx) {
        @rules();
    }
}

.bg {
    <strong i="11">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        .highdpi({
            background: url([email protected]);
        });
    }
}

أو طرق مماثلة.

متعلق برقم 1421 وقضايا / طلبات مماثلة.

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

الاندماج في # 1421 ربما؟

seven-phases-max في ٢٠ سبتمبر ٢٠١٦

👍3

ال 5 كومينتر

.highdpi(@rules) {
    <strong i="10">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), 
           (min-device-pixel-ratio: 1.25), 
           (min-resolution: 1.25dppx) {
        @rules();
    }
}

.bg {
    <strong i="11">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        .highdpi({
            background: url([email protected]);
        });
    }
}

أو طرق مماثلة.

متعلق برقم 1421 وقضايا / طلبات مماثلة.

الاندماج في # 1421 ربما؟

seven-phases-max في ٢٠ سبتمبر ٢٠١٦

👍3

@ Seven-stage-max أشكركم على توضيح هذا الأمر. سأقوم بتغيير mixin الخاص بي لاستخدام mixin آخر ".highdpi" بدلاً من المتغير مع سلسلة escaped.

falkenhawk في ٢١ سبتمبر ٢٠١٦

@ Seven-stage-max أعتقد أن هناك مشكلتين / طلبات ميزات منفصلة هنا ، لذلك لست متأكدًا مما إذا كان يجب علينا الدمج مع # 1421 دون تحديدهما.

السماح للمحلل الأقل بأن يكون أكثر تساهلاً مع التعبيرات والقوائم. السماح بتكوين القوائم من قيم أو محددات استعلام الوسائط ، على سبيل المثال. لذلك لا يجب أن يكون هروب السلسلة هذا شرطًا عند الرغبة في جعل استعلام وسائط متغيرًا. (وهي حاجة شائعة.) هذا هو # 1421 ، ويمكن أن يكون مثال media مجرد شيء آخر تمت إضافته إلى هذه المشكلة.
دمج قوائم قيم استعلام الوسائط المتداخلة (يعتمد على #1 ، لكن يجب أن يكون لها تصريح / فشل منفصل من #1 . على الرغم من القيام بذلك #1 ، #2 هي الخطوة المنطقية التالية ، لذا أعتقد أنه يمكننا تتبع ذلك هنا في # 2964.

matthew-dean في ٧ نوفمبر ٢٠١٦

بالإشارة إلى # 3059 هنا ، نظرًا لأنها تقريبًا نفس المشكلة. أي أن السؤال الأساسي هو: "هل يمكننا تحمل إعادة توزيع @media و @supports ، وما إلى ذلك بعد استبدال المتغيرات بقيمها؟" (يتطلب هذا إما إعادة هيكلة كبيرة للمحلل اللغوي نفسه بحيث يمكن استخدامه على سلسلة عشوائية في لحظة عشوائية ، أو تكرار كود التحليل في كل عقدة محددة ووظائف EVAL / css-gen الخاصة بها).

seven-phases-max في ٢٣ مايو ٢٠١٧

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