Less.js: जब उप-मीडिया क्वेरी के लिए एक चर का उपयोग किया जाता है, तो अमान्य नेस्टेड मीडिया क्वेरी "या" स्थिति के साथ मर्ज हो जाती है

को निर्मित 20 सित॰ 2016 · 5टिप्पणियाँ · स्रोत: less/less.js

अमान्य मीडिया क्वेरी को OR शर्तों (या तो अल्पविराम या "या" -कीवर्ड के साथ) के साथ मीडिया क्वेरी परिभाषा वाले चर का उपयोग करते समय संकलित किया जाता है। शीर्ष मीडिया क्वेरी को प्रत्येक उप-क्वेरी के साथ जोड़ा जाना चाहिए।

कम:

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

अपेक्षित आउटपुट - "(अधिकतम-चौड़ाई: 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

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

यह बग की तुलना में अधिक सुविधा अनुरोध है। कम को यह नहीं समझना चाहिए कि उन ~"" अंदर क्या है ( कहीं भी , न कि केवल मीडिया के प्रश्नों के लिए)। तो यह उम्मीद की जाती है कि कम को वहां किसी भी अल्पविराम या अन्य विशेष प्रतीकों के बारे में कभी पता नहीं चलेगा।

तकनीकी रूप से, ऊपर जैसा कोड ("एक बची हुई स्ट्रिंग में मीडिया प्रश्नों की सूची") एक पुराने क्विर्क/वाक्यविन्यास-समाधान की तरह है, न कि कभी उचित कोड माना जाता है (फिर भी ~"" वजह से)। आज के लेस में, उसी सामान को प्राप्त करने के लिए उचित पैटर्न "मैजिक वैल्यू वेरिएबल" के बजाय अनाम/अलग नियमों/मिश्रणों का उपयोग करना होगा, उदाहरण के लिए:

.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 20 सित॰ 2016

👍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 20 सित॰ 2016

👍3

@ सात-चरण-अधिकतम इसे साफ़ करने के लिए धन्यवाद। मैं अपने मिक्सिन को एस्केप्ड स्ट्रिंग वाले वेरिएबल के बजाय एक और ".highdpi" मिक्सिन का उपयोग करने के लिए बदलने जा रहा हूं।

falkenhawk 21 सित॰ 2016

@ सात-चरण-अधिकतम मुझे लगता है कि यहां दो अलग-अलग मुद्दे/सुविधा अनुरोध हैं, इसलिए सुनिश्चित नहीं है कि हमें उन्हें निर्दिष्ट किए बिना # 1421 में विलय करना चाहिए।

कम पार्सर को भाव और सूचियों के साथ अधिक ढीला होने दें। उदाहरण के लिए, सूचियों को मीडिया क्वेरी मानों या चयनकर्ताओं से बनने दें। ताकि मीडिया क्वेरी को वेरिएबल बनाने के लिए स्ट्रिंग एस्केपिंग की आवश्यकता न हो। (जो एक सामान्य आवश्यकता है।) यह #1421 है, और @media उदाहरण उस मुद्दे में कुछ और जोड़ा जा सकता है।
नेस्टेड मीडिया क्वेरी मानों की सूची मर्ज करें ( #1 पर निर्भर करता है, लेकिन #1 से अलग पास/असफल होना चाहिए। हालांकि ऐसा करने के बाद #1 , #2 एक तार्किक अगला कदम है। इसलिए, मुझे लगता है कि हम इसे यहां #2964 में ट्रैक कर सकते हैं।

matthew-dean 7 नव॰ 2016

यहां #3059 का संदर्भ दे रहा है, क्योंकि अनिवार्य रूप से यह लगभग एक ही समस्या है। यानी मूल रूप से सवाल यह है: "क्या हम @media और @supports प्रश्नों आदि के पूर्ण विशेषताओं वाले पुनर्मूल्यांकन का खर्च उठा सकते हैं, जब वेरिएबल्स को उनके मूल्यों के साथ प्रतिस्थापित किया जाता है?" (इसके लिए या तो पार्सर की एक प्रमुख रिफैक्टरिंग की आवश्यकता होती है, इसलिए इसे मनमाने पल पर मनमाने ढंग से स्ट्रिंग पर इस्तेमाल किया जा सकता है, या प्रत्येक विशिष्ट नोड और इसके eval/css-gen funcs पर पार्सिंग कोड को डुप्लिकेट किया जा सकता है)।

seven-phases-max 23 मई 2017

इस समस्या को स्वचालित रूप से पुराने के रूप में चिह्नित कर दिया गया है क्योंकि इसमें हाल की गतिविधि नहीं है। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।

stale[bot] 14 नव॰ 2017

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

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

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

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

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