Less.js: मीडिया क्वेरीज़: बिना --strict-math=on without के भी कोष्ठकों की आवश्यकता

को निर्मित 9 अग॰ 2013 · 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;
  }
}

तुच्छ समस्या मामले का संकलित सीएसएस (अमान्य):

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

वर्कअराउंड के साथ तुच्छ समस्या मामले का संकलित सीएसएस:

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

clayzermk1 18 सित॰ 2015

👍2

सभी 7 टिप्पणियाँ

आह, एक ज़रा सा मामला.. हम मीडिया के प्रश्नों में सख्त गणित लागू करते हैं ताकि लोग भिन्नों का उपयोग कर सकें, इस मुद्दे को उठाने के लिए धन्यवाद।

lukeapage 15 अग॰ 2013

मामूली समस्या का मामला:

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

तुच्छ समस्या मामले का संकलित सीएसएस (अमान्य):

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

वर्कअराउंड के साथ तुच्छ समस्या मामले का संकलित सीएसएस:

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

clayzermk1 18 सित॰ 2015

👍2

हम मूडल में भी इससे प्रभावित हैं क्योंकि यह समस्या बूटस्ट्रैप के स्टॉक संस्करण 2.3 को प्रभावित करती है।

इस मामले में चर सौंपा गया है (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 8 अप्रैल 2016

मैंने कुछ ऐसा करने की कोशिश की

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

ताकि अतिरिक्त कम चर बनाने से बचा जा सके, लेकिन यह काम नहीं करता है, कोई विचार क्यों?

es6Test 21 मई 2016

ताकि अतिरिक्त कम चर बनाने से बचा जा सके, लेकिन यह काम नहीं करता है, कोई विचार क्यों?

वर्तमान में @media कथनों में अंकगणितीय अभिव्यक्तियों के लिए माता-पिता की आवश्यकता होती है, जैसे:

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

seven-phases-max 21 मई 2016

मुझे त्रुटि मिलती है

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

http://localhost:63342/foo/app/app.js अपेक्षित ')' पर "ऐप/ऐप" से "ऐप/शैली/index.less!$less" लोड करने में त्रुटि

es6Test 21 मई 2016

मुझे त्रुटि मिलती है

आप @sm -1 और @sm - 1 (पहला वाला अंकगणितीय व्यंजक नहीं है बल्कि दो मान सूची है)।

seven-phases-max 22 मई 2016

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Less.js: मीडिया क्वेरीज़: बिना --strict-math=on without के भी कोष्ठकों की आवश्यकता

सबसे उपयोगी टिप्पणी

सभी 7 टिप्पणियाँ

संबंधित मुद्दों