Less.js: استعلامات الوسائط: يلزم وجود أقواس حتى بدون --strict-math = on

تم إنشاؤها على ٩ أغسطس ٢٠١٣ · 7تعليقات · مصدر: less/less.js

هذا المثال ينتج مخرجات مختلفة تحت 1.3.3 و 1.4.2:

.foo (@dpr) {
    <strong i="6">@dpi</strong>: <strong i="7">@dpr</strong> * 96dpi;
    <strong i="8">@query</strong>: ~'(min-resolution: @{dpi})';
    <strong i="9">@media</strong> <strong i="10">@query</strong> {
    }
}
.foo(2);

الإخراج بأقل 1.3.3:

<strong i="14">@media</strong> (min-resolution: 192dpi) {

}

الإخراج بأقل 1.4.1:

<strong i="18">@media</strong> (min-resolution: 2 * 96dpi) {

}

تؤدي إضافة الأقواس حول @dpr * 96dpi إنتاج 1.4.1 أقل مماثلاً لـ 1.3.3 ، لكن هذا كان مسدودًا غير متوقع مع الترقية إلى 1.4.x.

bug high priority

مصدر

papandreou

👍1

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

: +1: مشاهدة هذا أيضًا على أقل من 2.5.1. يعمل الحل البديل المقترح لوضع أقواس حول المتغير في استعلام الوسائط.

حالة مشكلة تافهة:

<strong i="7">@foo</strong>: 10px;
<strong i="8">@bar</strong>: 20px;
<strong i="9">@baz</strong>: <strong i="10">@foo</strong> + @bar;

.test {
  <strong i="11">@media</strong> (min-width: @baz) {
    color: red;
  }
}

CSS مجمعة لحالة مشكلة تافهة (غير صالحة):

<strong i="15">@media</strong> (min-width: 10px + 20px) {
  .test {
    color: red;
  }
}

حالة المشكلة البسيطة مع الحل:

<strong i="19">@foo</strong>: 10px;
<strong i="20">@bar</strong>: 20px;
<strong i="21">@baz</strong>: <strong i="22">@foo</strong> + @bar;

.test {
  <strong i="23">@media</strong> (min-width: (@baz)) {
    color: red;
  }
}

CSS مجمعة لحالة مشكلة تافهة مع الحل:

<strong i="27">@media</strong> (min-width: 30px) {
  .test {
    color: red;
  }
}

clayzermk1 في ١٨ سبتمبر ٢٠١٥

👍2

ال 7 كومينتر

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

lukeapage في ١٥ أغسطس ٢٠١٣

: +1: مشاهدة هذا أيضًا على أقل من 2.5.1. يعمل الحل البديل المقترح لوضع أقواس حول المتغير في استعلام الوسائط.

حالة مشكلة تافهة:

<strong i="7">@foo</strong>: 10px;
<strong i="8">@bar</strong>: 20px;
<strong i="9">@baz</strong>: <strong i="10">@foo</strong> + @bar;

.test {
  <strong i="11">@media</strong> (min-width: @baz) {
    color: red;
  }
}

CSS مجمعة لحالة مشكلة تافهة (غير صالحة):

<strong i="15">@media</strong> (min-width: 10px + 20px) {
  .test {
    color: red;
  }
}

حالة المشكلة البسيطة مع الحل:

<strong i="19">@foo</strong>: 10px;
<strong i="20">@bar</strong>: 20px;
<strong i="21">@baz</strong>: <strong i="22">@foo</strong> + @bar;

.test {
  <strong i="23">@media</strong> (min-width: (@baz)) {
    color: red;
  }
}

CSS مجمعة لحالة مشكلة تافهة مع الحل:

<strong i="27">@media</strong> (min-width: 30px) {
  .test {
    color: red;
  }
}

clayzermk1 في ١٨ سبتمبر ٢٠١٥

👍2

نحن أيضًا نتأثر بهذا الأمر في Moodle لأن هذه المشكلة تؤثر على الإصدار 2.3 من bootstrap.

في هذه الحالة يتم تعيين المتغير (https://github.com/twbs/bootstrap/blob/v2.3.2/less/variables.less#L181):

<strong i="7">@navbarCollapseWidth</strong>:             979px;
<strong i="8">@navbarCollapseDesktopWidth</strong>:      <strong i="9">@navbarCollapseWidth</strong> + 1;

استعلام الوسائط هو (https://github.com/twbs/bootstrap/blob/v2.3.2/less/responsive-navbar.less#L181):

<strong i="13">@media</strong> (min-width: @navbarCollapseDesktopWidth) {
}

هذا يؤدي إلى ناتج:

<strong i="17">@media</strong> (min-width: 979px + 1) {
}

https://tracker.moodle.org/browse/MDL-53152

andrewnicols في ٨ أبريل ٢٠١٦

حاولت القيام بشيء مثل

@media (min-width: @navbarCollapseWidth + 1) { }

لتجنب إنشاء متغير إضافي أقل ، لكن هذا لا يعمل ، أي أفكار لماذا؟

es6Test في ٢١ مايو ٢٠١٦

لتجنب إنشاء متغير إضافي أقل ، لكن هذا لا يعمل ، أي أفكار لماذا؟

الأقواس مطلوبة حاليًا للتعبيرات الحسابية في كشوف حسابات @media ، على سبيل المثال:

<strong i="9">@media</strong> (min-width: (<strong i="10">@navbarCollapseWidth</strong> + 1)) { }

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

لدي خطأ ل

<strong i="6">@media</strong> (max-width: (<strong i="7">@sm</strong> -1)) {
  .hidden-sm-down{  // hide anything up to small size
    display: none;
  }
}

حدث خطأ أثناء تحميل "app / styles / index.less! $ less" من "app / app" على http: // localhost: 63342 / foo / app / app.js المتوقع ')' "

es6Test في ٢١ مايو ٢٠١٦