less.js 🚀 - समूह मीडिया प्रश्न

कथनों को पुनर्व्यवस्थित करके अर्थ को संभावित रूप से बदले बिना आप ऐसा कैसे करते हैं?

lukeapage 11 सित॰ 2012

मुझे नहीं लगता कि अर्थ बदला जा सकता है। यह ठीक वैसा ही होगा जैसे सामान्य निरर्थक टैग को संक्षिप्त करना। उदाहरण के लिए:

body {
    background: white;
}

body {
    padding: 0;
    margin: 0;
}

को ध्वस्त कर दिया जाएगा:

body {
    background: white;
    padding: 0;
    margin: 0;
}

मीडिया प्रश्नों के मामले में यह और भी अधिक है क्योंकि वे विशेष शीर्ष स्तर के चयनकर्ता हैं जो सामान्य तत्व चयनकर्ताओं के शीर्ष पर एक नियंत्रण परत के रूप में कार्य करते हैं। मूल रूप से, उनका केवल एक ही अर्थ होता है और वे फ़ाइल के बाकी सीएसएस से प्रभावित नहीं होते हैं।

इसके अलावा, कम पहले से ही बुदबुदाए गए मीडिया प्रश्नों के क्रम को बनाए रखता है, यह ठीक उसी क्वेरी के लिए बहुत सारे अनावश्यक चयनकर्ता बनाता है। यदि उन्हें बफ़र किया जा सकता है और प्रसंस्करण के अंत में एक ही प्रश्न पर लिखा जा सकता है तो यह बहुत अधिक स्वच्छ और निर्माता छोटा सीएसएस आउटपुट होगा।

Soviut 11 सित॰ 2012

मीडिया प्रश्नों के अंदर चयनकर्ता जटिलता के आसपास के नियम क्या हैं? करो
प्रश्न जटिलता को बढ़ाते हैं और किसी भी आदेश को ओवरराइड करते हैं? क्या आप कोई इशारा कर सकते हैं
ऐनक?

lukeapage 11 सित॰ 2012

अनिवार्य रूप से, हाँ। मीडिया चयनकर्ता IF स्टेटमेंट की तरह होते हैं जो सामान्य शैली के नियमों के इर्द-गिर्द लपेटे जाते हैं और केवल तभी लागू होते हैं जब क्वेरी की शर्त पूरी होती है। उदाहरण के लिए, यदि ब्राउज़र की चौड़ाई एक निश्चित संख्या में पिक्सेल से कम है तो क्वेरी के भीतर नियम चालू हो जाते हैं और मौजूदा नियमों को ओवरराइड कर देते हैं।

तो एक ही शैली के साथ बहुत सारे समान प्रश्न होने पर प्रत्येक एक क्वेरी के समान कार्यात्मक रूप से सभी शैलियों के साथ समान होगा। जब तक क्वेरी वही है।

Soviut 11 सित॰ 2012

मोज़िला से कुछ दस्तावेज़ यहां दिए गए हैं

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Soviut 11 सित॰ 2012

मेरा मतलब इस उदाहरण में है .. div लाल हो जाता है - जिसका अर्थ है मीडिया प्रश्नों को फिर से व्यवस्थित करना (दोनों स्क्रीन के लिए) सीएसएस का अर्थ बदल देगा

<strong i="6">@media</strong> screen {
    div {
        background-color: green;
    }
}

div {
     background-color: red;
}

<strong i="7">@media</strong> screen {
    div.pink {
        background-color: pink;
    }
}

lukeapage 11 सित॰ 2012

इसे केवल तभी संयोजित करना चाहिए जब नियम सीधे एक दूसरे का अनुसरण करें।

cloudhead 11 सित॰ 2012

जो वे @Soviut मूल उदाहरण में नहीं हैं, इस सुविधा को IMO में सीमित उपयोग का अनुरोध करते हैं

lukeapage 11 सित॰ 2012

मैं सहमत हूं, लेकिन मुझे नहीं पता कि यह बुदबुदाए गए मीडिया प्रश्नों पर कैसे लागू होगा? याद रखें, बुदबुदाते हुए प्रश्न वाक्यात्मक चीनी का एक सा हैं; आप आम तौर पर किसी अन्य चयनकर्ता के अंदर मीडिया क्वेरी एम्बेड नहीं कर सकते। तो यह सुरक्षित रूप से माना जा सकता है कि किसी भी समय आप एक बुदबुदाती क्वेरी का सामना करते हुए उसे समान बुदबुदाती प्रश्नों के साथ समूहित करते हैं जिस क्रम में वे आते हैं।

Soviut 12 सित॰ 2012

यदि आपके पास एक दूसरे के बगल में दो बुदबुदाते मीडिया प्रश्न हैं जिन्हें जोड़ा जा सकता है तो मुझे लगता है कि कम में ऐसा करना बहुत स्पष्ट होगा .. क्या आप एक वास्तविक उदाहरण दे सकते हैं जहां मीडिया प्रश्नों को जोड़ना सुरक्षित होगा और यह समझ में आता है उन्हें कम में अलग रखने के लिए?

lukeapage 18 अक्तू॰ 2012

रेटिना छवियों के साथ काम करते समय, हमने जटिल मीडिया क्वेरी को एक मिक्सिन के अंदर लपेटा है और स्प्राइट मिक्सिन बनाया है, इसलिए हमारे पास यह सभी जगह है ... यह आउटपुट सीएसएस को बढ़ाता है लेकिन यह अधिक रखरखाव योग्य है।

उदाहरण के लिए, यहां हमारा स्प्राइट मिक्सिन है:

.sprite(<strong i="7">@spritePath</strong>, <strong i="8">@hdpiPath</strong>, <strong i="9">@x</strong>, <strong i="10">@y</strong>, <strong i="11">@size</strong>: auto) {
    background-image: url(@spritePath);  
    background-repeat: no-repeat;
    background-position: -1 * <strong i="12">@x</strong> -1 * @y; // Negativize the value
    .background-size(@size);
    <strong i="13">@media</strong> <strong i="14">@mediaRetina</strong> {
        background-image: url(@hdpiPath);
    }
}

जहां @mediaRetina है:

<strong i="19">@mediaRetina</strong>: ~"only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 4/3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx)";

फिर नीचे, हम प्रत्येक स्प्राइट तत्व को इस तरह लपेटने के लिए और अधिक मिश्रण बनाते हैं:

#sprite
{
    .header-logo()
    {
        .sprite(<strong i="23">@globalSpritePath</strong>, <strong i="24">@global2XSpritePath</strong>, 22px, 0, 384px 288px);
        width: 94px;
        height: 59px;
    }
}

और इसे अन्य LESS फ़ाइल (फ़ाइलों) में इस तरह उपयोग करें:

h1 {
    width: 94px;
    height: 59px;

    a {
        #sprite > .header-logo();
    }

}

इस मामले में, उत्पन्न सीएसएस इस तरह दिखता है:

h1 a {
  background-image: url("/images/sprite-global.png");
  background-repeat: no-repeat;
  background-position: -22px 0;
  -webkit-background-size: 384px 288px;
  -moz-background-size: 384px 288px;
  -o-background-size: 384px 288px;
  background-size: 384px 288px;
  width: 94px;
  height: 59px;
}
<strong i="31">@media</strong> only screen and (-webkit-min-device-pixel-ratio: 1.3), 
       only screen and (min--moz-device-pixel-ratio: 1.3), 
       only screen and (-o-min-device-pixel-ratio: 4/3), 
       only screen and (min-device-pixel-ratio: 1.3), 
       only screen and (min-resolution: 124dpi), 
       only screen and (min-resolution: 1.3dppx) {
  h1 a {
    background-image: url("/images/[email protected]");
  }
}

अब कल्पना कीजिए कि यह मामला कई बार दोहराया जा रहा है। समूहीकरण के बिना, इस अतिरिक्त वजन को कम करने का एकमात्र तरीका प्रत्येक रेटिना शैली को एक समर्पित LESS फ़ाइल में स्थानांतरित करना है, जो छोटी साइटों के लिए काम कर सकती है, लेकिन एक बड़ी साइट के लिए अवास्तविक है।

यह वह जगह है जहां उन्हें समूहबद्ध करना और उन्हें अलग रखना समझ में आता है, खासकर यदि आपके पास बहुत सारे मॉड्यूल (जैसे हमारे) के साथ एक बड़ी साइट है।

मुझे पता है कि शैलियों को ओवरराइड करने के बारे में आपका क्या मतलब है, और मुझे यकीन नहीं है कि आप इस सटीक सुविधा को सुरक्षित रूप से लागू कर सकते हैं बिना संभावित रूप से एक डिजाइनर को कैस्केडिंग के साथ खिलवाड़ किए बिना।

मेरे लिए यह एक "सेक्शन" (प्लेसहोल्डर) को परिभाषित करने और फिर उसमें रखी जाने वाली शैलियों को परिभाषित करने में सक्षम होने जैसा लगता है, चाहे वे किसी भी क्रम में लिखे गए हों। सर्वर-साइड टेम्प्लेट में यह बहुत आम है, जहां आपके पास "स्क्रिप्ट" या "हेड" अनुभाग होता है और फिर आपके पृष्ठ लोड होने पर उनमें सामग्री इंजेक्ट कर सकते हैं।

इसलिए, मैं इसे कम फ़ाइल में अनिवार्य रूप से करने में सक्षम होना चाहता हूं:

<strong i="39">@media</strong> { // retina query
    @renderSection("retina")
}

// in another file
h1 {
    <strong i="40">@section</strong> retina {
        // retina styles
    }
}

वर्तमान चयनकर्ता के साथ संकलन पर @section को बदल दिया जाएगा।

तो, मेरा स्प्राइट मिक्सिन बन जाएगा:

.sprite(<strong i="46">@spritePath</strong>, <strong i="47">@hdpiPath</strong>, <strong i="48">@x</strong>, <strong i="49">@y</strong>, <strong i="50">@size</strong>: auto) {
    background-image: url(@spritePath);  
    background-repeat: no-repeat;
    background-position: -1 * <strong i="51">@x</strong> -1 * @y; // Negativize the value
    .background-size(@size);
    <strong i="52">@section</strong> retina {
        background-image: url(@hdpiPath);
    }
}

यह सिंटैक्स (या कार्यान्वयन) होने की आवश्यकता नहीं है, मैं इसे ASP.NET रेजर सिंटैक्स से अलग कर रहा हूं क्योंकि मैं इससे परिचित हूं और मुझे सिंटैक्स पसंद है।

kamranayub 23 अक्तू॰ 2012

इसका एक अच्छा उदाहरण .. और एक अच्छा उपयोग-मामला .. आप कर सकते हैं

@media-section

(या मीडिया-समूह) जो तब मीडिया को एक साथ समूहित करने के लिए कम बताएगी (वैकल्पिक रूप से इसे मीडिया क्वेरी में विलय कर रही है यदि यह पहले से मौजूद है जो आपको नियमों को वहां खींचने की अनुमति देगी जहां आप उन्हें रखना चाहते हैं) .. शायद यही है आपका मतलब क्या है?

मुझे लगता है कि यह एक अच्छा विचार है (और इसे लागू करना बहुत मुश्किल नहीं है)

lukeapage 24 अक्तू॰ 2012

👍1

+1 @ मीडिया-समूह के लिए

Soviut 24 अक्तू॰ 2012

+1 @ मीडिया-समूह

Leegorous 16 जन॰ 2013

दूसरा विकल्प यह होगा कि सही/गलत समूहबद्ध करने के लिए एक वैश्विक विकल्प हो।

lukeapage 22 मार्च 2013

हम्म, यह शायद एक अच्छा विचार है। क्या ऐसा कोई मामला होगा जहां चयनात्मक समूहन आवश्यक होगा?

मुझे लगता है कि ज्यादातर मामलों में, लोग चाहते हैं कि उनके मीडिया प्रश्न अधिक कॉम्पैक्ट हों, इसलिए अभी के लिए एक वैश्विक विकल्प जाने का रास्ता हो सकता है। यदि कोई व्यक्ति चयनात्मक समूहन की आवश्यकता का दावा करता है, तो बाद में नए खोजशब्द जोड़े जा सकते हैं।

वैश्विक समूहीकरण विकल्प के लिए +1।

Soviut 22 मार्च 2013

हाँ.. क्योंकि हमने @import साथ देखा कि एक से अधिक कीवर्ड जोड़ना कोई रास्ता नहीं था और एक विकल्प जोड़ना कम विवादास्पद है।

lukeapage 22 मार्च 2013

मैं कहूंगा कि विकल्प जोड़ें क्योंकि यह तुरंत उपयोगी होगा और एक चुनिंदा आयात के साथ ओवरराइड के रूप में सह-अस्तित्व में सक्षम होगा, इसे कभी भी बनाया जाना चाहिए।

Soviut 22 मार्च 2013

हैलो, मैंने अभी इस मुद्दे को देखा है और जब मुझे मीडिया के प्रश्नों को समूहबद्ध करने की आवश्यकता होती है तो मैं एक छोटा सा ऐप साझा करना चाहता हूं। यह एक तैयार ऐप नहीं है। भविष्य के उपकरण के लिए कुछ शोध की तरह। इसलिए मैं आपको केवल विचार दिखाना चाहता हूं, क्योंकि मैं वास्तव में सोचता हूं कि यह कुछ ऐसा है जिसे लागू किया जाना चाहिए। (बग और अन्य समस्याएं हो सकती हैं) लेकिन मैंने अपनी आखिरी परियोजना के साथ परीक्षण किया है जिसमें ट्विटर बूटस्ट्रैप शामिल है और यह ठीक से काम करता है। (नियमों के क्रम में कोई समस्या नहीं) मुझे बताएं;)

http://mqhelper.nokturnalapp.com

AoDev 17 अप्रैल 2013

नमस्कार!

क्या किसी को यह सौंपा गया है? यह एक महान विशेषता है जो कम के साथ बनाए जाने पर सीएसएस फ़ाइल को कम करने के लिए बहुत उपयोगी हो सकती है। और इस तरह, डेवलपर्स के लिए इन सभी @mqs के साथ काम करना आसान हो जाएगा।

AllanStepps-old-account 29 अप्रैल 2013

@AoDev mqhelper निश्चित रूप से सही दिशा में एक कदम है, मैं इसे अभी के लिए एक सीएसएस लाइनिंग प्रक्रिया के हिस्से के रूप में उपयोगी देख सकता हूं। मुझे लगता है कि इसे आपके डेमो में फ्रंट-एंड सामग्री से निकालने वाली मूल कार्यक्षमता की आवश्यकता है।

DaveKin 30 अप्रैल 2013

हां, लेकिन मेरे ऐप का लक्ष्य कुछ "असली टूल" का हिस्सा नहीं बनना है। मैंने यहां बहुत से लोगों को यह सोचते हुए देखा कि क्या मीडिया के प्रश्नों को समूहबद्ध करना एक समस्या हो सकती है और मैं यह दिखाना चाहता था कि यह किया जा सकता है। कोड कम के देवों के लिए है यदि वे एक विचार रखना चाहते हैं और इसके कुछ हिस्सों का उपयोग करना चाहते हैं। लेकिन अगर आप चाहें तो मैं इसे "वास्तविक" मॉड्यूल बना सकता हूं :)

AoDev 30 अप्रैल 2013

मैंने इसे पहले ही प्रबंधित कर लिया है, यह एक साफ-सुथरा काम है, धन्यवाद।

DaveKin 30 अप्रैल 2013

@ सोवियत @lukeapage मुझे लगता है कि चुनिंदा समूह सबसे अधिक समझ में आता है। कैस्केड को बनाए रखने की कोशिश में सभी या कुछ भी कहर बरपाता है। विस्तार के समान कुछ होना चाहिए, या शायद सचमुच समूह कीवर्ड जोड़ना चाहिए। जैसे यह वाक्य-विन्यास बहुत अच्छा होगा:

<strong i="8">@tablet</strong>: (max-width: 979px);

.a {
  color: yellow;
  <strong i="9">@media</strong> <strong i="10">@tablet</strong> group {
    color: red;
  }
}
.b {
  background: black;
  <strong i="11">@media</strong> <strong i="12">@tablet</strong> group {
    background: white;
  }
}

//output
.a { color: yellow; }
.b { background: black; }
<strong i="13">@media</strong> (max-width: 979px) {
  .a { color: red; }
  .b { background: white; }
}

matthew-dean 1 मई 2013

हैलो, मीडिया-प्रश्नों का समूहीकरण वास्तव में एक अच्छा जोड़ होगा। इस बीच मैं इस विचार के साथ आया हूं, मुझे आश्चर्य है कि डुप्लिकेट गुणों से बचने के लिए आगामी :extend सुविधा के साथ इसका उपयोग किया जा सकता है:

// Define the media queries
<strong i="7">@step1</strong>: ~"only screen and (max-width: 960px)";
<strong i="8">@step2</strong>: ~"only screen and (min-width: 961px)";

// Default empty mixins
.step1() {}
.step2() {}

// Custom styles
.test { color: blue; }

// Change the style in the media queries
.step1() {
  .test { color: red; }
}

.step2() {
  .test { color: green; }
}

// Finally render the media queries
<strong i="9">@media</strong> <strong i="10">@step1</strong> { .step1(); }
<strong i="11">@media</strong> <strong i="12">@step2</strong> { .step2(); }

gyopiazza 10 मई 2013

@AoDev द्वारा बनाया गया @AoDev द्वारा बनाए गए टूल के विरुद्ध परीक्षण किया

DesignByOnyx 28 मई 2013

@kamranayub ने ठीक उसी स्थिति के बारे में बताया, जिससे मैं निपट रहा हूं। व्यक्तिगत रूप से, मैं इस कार्यान्वयन के किसी न किसी रूप को देखना पसंद करूंगा। @DesignByOnyx , नीचे दिया गया परीक्षण कोड @AoDev के टूल के साथ ठीक से संकलित नहीं होता है। मैं इस तरह की स्टाइलिंग करना पसंद करूंगा जैसे कामरानायुब ने उल्लेख किया है। बड़ी साइटों पर कई कम फ़ाइलों के साथ काम करते समय यह बहुत साफ होता है।

.footer ul {

  margin: 10px;

  <strong i="9">@media</strong> @layout-tablet, @layout-full {
    font-size: 13px;
    font-weight: bold;
  }
  <strong i="10">@media</strong> @layout-mobile {
    font-size: 10px;
    padding-left: 10px;
  }

  li {

    background: black;
    color: white;
    padding: 10px;

    <strong i="11">@media</strong> @layout-tablet, @layout-full { .border-radius(@radius) }
    <strong i="12">@media</strong> @layout-mobile { .border-radius(@radius-mobile) }   
  }

}

pmacom 2 जुल॰ 2013

यह काम नहीं करता है क्योंकि आपने कम सिंटैक्स का उपयोग किया है। यह काम करने के लिए है
सीएसएस के साथ।
2 जुलाई 2013 को रात 9:19 बजे, "पी मैकोम" नोटिफिकेशन @github.com ने लिखा:

@kamranayub https://github.com/kamranayub ने सटीक रूप से समझाया
जिस स्थिति से मैं निपट रहा हूं। व्यक्तिगत रूप से, मुझे कुछ रूप देखना अच्छा लगेगा
इस कार्यान्वयन के। @DesignByOnyx https://github.com/DesignByOnyx ,
नीचे दिया गया परीक्षण कोड @A oDevhttps://github.com/AoDev के साथ ठीक से संकलित नहीं होता है
उपकरण। मैं इस तरह की स्टाइलिंग करना पसंद करूंगा जैसे कामरानायुब ने उल्लेख किया है।
बड़ी साइटों पर कई कम फ़ाइलों के साथ काम करते समय यह बहुत साफ होता है।
फुटर उल {
मार्जिन: 10px;
@ मीडिया @ लेआउट-टैबलेट, @ लेआउट-पूर्ण {
फ़ॉन्ट-आकार: 13px;
फोंट की मोटाई: बोल्ड;
}
@ मीडिया @ लेआउट-मोबाइल {
फ़ॉन्ट-आकार: 10px;
पैडिंग-बाएं: 10px;
}
ली {
background: black;
color: white;
padding: 10px;

@media @layout-tablet, @layout-full { .border-radius(@radius) }
@media @layout-mobile { .border-radius(@radius-mobile) }
}
}
-
इस ईमेल का सीधे उत्तर दें या इसे Gi tHub पर देखेंhttps://github.com/less/less.js/issues/950#issuecomment -20369038
.

AoDev 2 जुल॰ 2013

क्या LESS के संसाधित होने के बाद @AoDev के टूल द्वारा उपयोग किए गए लॉजिक को चलाने का प्रस्ताव है? मैं ऐसे मामले के बारे में नहीं सोच सकता जहां वह नहीं होगा जो मैं अपने सिर के ऊपर से चाहता हूं।

kamranayub 2 जुल॰ 2013

क्या LESS के संसाधित होने के बाद @AoDev के टूल द्वारा उपयोग किए गए लॉजिक को चलाने का प्रस्ताव है? मैं ऐसे मामले के बारे में नहीं सोच सकता जहां वह नहीं होगा जो मैं अपने सिर के ऊपर से चाहता हूं।

kamranayub 2 जुल॰ 2013

मुझे लगता है कि यह अंतरिम के लिए एक विकल्प है, मैं एक grunt.js मॉड्यूल में @AoDev के समाधान को लपेटने पर विचार करूंगा ताकि इसे LESS संसाधित होने के बाद स्वचालित रूप से चलाया जा सके (यह इस धारणा पर आधारित है कि पूर्व-प्रसंस्करण किया जा रहा है तैनाती से पहले किया गया, फ्लाई पर नहीं)

DaveKin 5 जुल॰ 2013

कच्चे सीएसएस के लिए अंतरिम और उपयोगी सार्वभौमिक रूप से एक गंभीर कार्य निश्चित रूप से अच्छा होगा। हालाँकि, यह देखते हुए कि @media मैजिक LESS पहले से कितना कर रहा है, एक समूहीकरण विकल्प तार्किक लगता है।

फिर से, ग्रंट कार्य उन लोगों के लिए मीडिया प्रश्नों को अपनी फाइलों में पूरी तरह से अलग करने में सक्षम हो सकता है, जो फ्लाई पर मोबाइल स्टाइलशीट लोड करना पसंद करते हैं।

Soviut 5 जुल॰ 2013

अब जब आप इसका उल्लेख कर चुके हैं, तो स्टाइलशीट को अलग करना एक उपयोगी विकल्प है - वर्तमान में आपको ऐसा करने के लिए विशेष रूप से अपनी स्रोत फ़ाइलों को बनाने की आवश्यकता होगी।

हो सकता है कि यहां समूह के लिए एक अलग मीडिया-क्वेरी ऑप्टिमाइज़र टूल की गुंजाइश हो और वैकल्पिक रूप से मीडिया क्वेरीज़ को विभाजित किया जाए?

DaveKin 5 जुल॰ 2013

बिल्कुल। मुझे यकीन नहीं है कि सीएसएसओ पहले से ही ऐसा करता है, एकमात्र सीएसएस पुनर्लेखक होने के नाते मुझे पता है कि इसके साथ एक ग्रंट कार्य भी जुड़ा हुआ है। लेकिन यहां तक कि यह मीडिया के प्रश्नों जैसी चीजों को अलग फाइलों में विभाजित नहीं कर सकता है। इसी तरह, डीओएम संरचना के विपरीत, समान चयनकर्ताओं और विशेषताओं के आधार पर इसका पुनर्लेखन बहुत ही बुनियादी है।

Soviut 5 जुल॰ 2013

Mqhelper आपको पहले से ही व्यक्तिगत मीडिया प्रश्नों को वापस देता है गीथब की जाँच करें
अधिक जानकारी के लिए पेज। अलग सीएसएस फाइलें वहां से बनाई जा सकती हैं।
5 जुलाई 2013 को सुबह 10:08 बजे, "सोवियत" नोटिफिकेशन @github.com ने लिखा:

बिल्कुल। मुझे यकीन नहीं है कि CSSO पहले से ही ऐसा करता है, केवल CSS होने के नाते
पुनर्लेखक मुझे पता है कि इसके साथ एक ग्रंट कार्य भी जुड़ा हुआ है। लेकिन यहां तक
यह मीडिया के प्रश्नों जैसी चीजों को अलग फाइलों में विभाजित नहीं कर सकता है। इसी तरह,
समान चयनकर्ताओं और विशेषताओं के आधार पर इसका पुनर्लेखन बहुत ही बुनियादी है,
डोम संरचना के विपरीत।
-
इस ईमेल का सीधे उत्तर दें या इसे Gi tHub पर देखेंhttps://github.com/less/less.js/issues/950#issuecomment -20505834
.

AoDev 5 जुल॰ 2013

ऐसा लगता है कि कुछ कम लंबी अवधि के लिए उपयोगी है और बहुत मुश्किल नहीं है
(दोनों एक समूहीकरण विकल्प और एक अलग फ़ाइल विकल्प) यदि आप में से कोई एक
लागू करना पसंद है मैं आपकी मदद कर सकता हूं ...

lukeapage 6 जुल॰ 2013

मैं इसे लागू करने के लिए किसी प्रकार के "सेक्शन" या "ग्रुप" विचार की ओर बढ़ने को हतोत्साहित नहीं करना चाहता (मुझे लगता है कि यह अच्छा है)। हालांकि, अगर कोई कोड में @media संपत्ति जानकारी को परिभाषित करने की क्षमता चाहता है जहां इसे नियमित सीएसएस के लिए परिभाषित किया गया है, लेकिन क्या इसे कोड में कहीं और एक @media क्वेरी में समूहीकृत किया गया है, वहां कम से कम दो तरीके हैं जो वर्तमान में कम कार्यक्षमता के साथ किया जा सकता है, प्लेसमेंट का अच्छा नियंत्रण दे रहा है, लेकिन स्वीकार्य रूप से प्रस्तावित समाधान की आवश्यकता के ऊपर कुछ अतिरिक्त कोडिंग के साथ (इसलिए हर तरह से, उस पर काम करना जारी रखें)। विचार करना:

<strong i="8">@media</strong> screen {
  .my-class > .mediaScreen();
  #screenSpace1(screen);
  #screenSpace2(screen);
}

//technique #1 only works for a top level class or id that can act as a namespace
//and would not handle a deep nesting very well
.my-class {
  regular-property: value;

  .mediaScreen(<strong i="9">@selectorString</strong>: ~'.my-class') { //full path needs repeat here if deeply nested
    @{selectorString} {
      media-screen-property: value;
    }
  }
}

//technique #2 allows for tag selectors and easier deeper nesting 
#screenSpace1(<strong i="10">@place</strong>: noMedia) {
  div > ul {
    .setProps() when (<strong i="11">@place</strong> = noMedia) {
       regular-property: value;
    }
    .setProps() when (<strong i="12">@place</strong> = screen) {
       screen-property: value;
    }
    .setProps();

    li {
       .setProps() when (<strong i="13">@place</strong> = noMedia) {
          regular-property: value;
          &:hover { regular-property: value; }
       }
       .setProps() when (<strong i="14">@place</strong> = screen) {
          screen-property: value;
          &:hover { screen-property: value; }
        }
       .setProps();
    }
  }
}
#screenSpace1();

.more-classes-not-needing-media {property: value;}

#screenSpace2(<strong i="15">@place</strong>: noMedia) {
  .someClass {
    .setProps() when (<strong i="16">@place</strong> = noMedia) {
       regular-property: value;
    }
    .setProps() when (<strong i="17">@place</strong> = screen) {
       screen-property: value;
    }
    .setProps();

    > a {
       .setProps() when (<strong i="18">@place</strong> = noMedia) {
          regular-property: value;
          &:hover { regular-property: value; }
       }
       .setProps() when (<strong i="19">@place</strong> = screen) {
          screen-property: value;
          &:hover { screen-property: value; }
        }
       .setProps();
    }
  }
}
#screenSpace2();

जो इस सीएसएस का उत्पादन करता है:

<strong i="23">@media</strong> screen {
  .my-class {
    media-screen-property: value;
  }
  div > ul {
    screen-property: value;
  }
  div > ul li {
    screen-property: value;
  }
  div > ul li:hover {
    screen-property: value;
  }
  .someClass {
    screen-property: value;
  }
  .someClass > a {
    screen-property: value;
  }
  .someClass > a:hover {
    screen-property: value;
  }
}
.my-class {
  regular-property: value;
}
div > ul {
  regular-property: value;
}
div > ul li {
  regular-property: value;
}
div > ul li:hover {
  regular-property: value;
}
.more-classes-not-needing-media {
  property: value;
}
.someClass {
  regular-property: value;
}
.someClass > a {
  regular-property: value;
}
.someClass > a:hover {
  regular-property: value;
}

scottgit 10 जुल॰ 2013

मैं कुछ ऐसा करना चाहता था:

/*
 * Span mixins
 * adapted from Gridpak Beta LESS
 * http://gridpak.com/
 * Created by <strong i="6">@erskinedesign</strong>
 */

.mixin-span(<strong i="7">@num</strong>, <strong i="8">@gutter_pc</strong>, <strong i="9">@padding</strong>, @max_columns) when (<strong i="10">@num</strong> > @max_columns) {
    .mixin-span(<strong i="11">@max_columns</strong>, <strong i="12">@gutter_pc</strong>, <strong i="13">@padding</strong>, @max_columns);
}
.mixin-span(<strong i="14">@num</strong>, <strong i="15">@gutter_pc</strong>, <strong i="16">@padding</strong>, @max_columns) when (<strong i="17">@num</strong> =< @max_columns) {
    <strong i="18">@one_col</strong>: (100% - (<strong i="19">@gutter_pc</strong> * (<strong i="20">@max_columns</strong> - 1))) / @max_columns;
    width:(<strong i="21">@one_col</strong> * @num) + (<strong i="22">@gutter_pc</strong> * (<strong i="23">@num</strong> - 1));
    padding:@padding;
    margin-left:@gutter_pc;
}
.mixin-span_first() {
    margin-left:0;
}

// end of adapted Gridpak LESS

// Namespaced mixin sets

#mob{
    <strong i="24">@max_columns</strong>: 1;
    <strong i="25">@padding</strong>: 0 1.5%;
    <strong i="26">@gutter_pc</strong>: 5%;

    .span(@col){
        <strong i="27">@media</strong> screen and (max-width:300px){
            .mixin-span(<strong i="28">@col</strong>, <strong i="29">@gutter_pc</strong>, <strong i="30">@padding</strong>, @max_columns);
            .mixin-span_first;
        }
    }
}

#desk{
    <strong i="31">@max_columns</strong>: 10;
    <strong i="32">@padding</strong>: 0 3%;
    <strong i="33">@gutter_pc</strong>: 5%;

    .span(@col){
        <strong i="34">@media</strong> screen and (min-width:301px){
            .mixin-span(<strong i="35">@col</strong>, <strong i="36">@gutter_pc</strong>, <strong i="37">@padding</strong>, @max_columns);
        }
    }
}

//assign different layouts per namespaced breakpoint
/* ----- Header ----- */
#header{
    #mob > .span(2);
    #desk > .span(4);
    .mixin-span_first;
    background-color:#888;
    color:#fff;
}

/* ----- Main ----- */
#main{
    #mob > .span(1);
    #desk > .span(6);
    background-color:#eee;
    color:#111;
}

लेकिन बिना किसी समूह के, उत्पन्न सीएसएस थोड़ा भारी है

/* ----- Header ----- */
#header {
  margin-left: 0;
  background-color: #888;
  color: #fff;
}
<strong i="41">@media</strong> screen and (max-width: 300px) {
  #header {
    width: 100%;
    padding: 0 1.5%;
    margin-left: 5%;
    margin-left: 0;
  }
}
<strong i="42">@media</strong> screen and (min-width: 301px) {
  #header {
    width: 37%;
    padding: 0 3%;
    margin-left: 5%;
  }
}
/* ----- Main ----- */
#main {
  background-color: #eee;
  color: #111;
}
<strong i="43">@media</strong> screen and (max-width: 300px) {
  #main {
    width: 100%;
    padding: 0 1.5%;
    margin-left: 5%;
    margin-left: 0;
  }
}
<strong i="44">@media</strong> screen and (min-width: 301px) {
  #main {
    width: 58%;
    padding: 0 3%;
    margin-left: 5%;
  }
}

DaveKin 10 जुल॰ 2013

इसके लिए एक समाधान है https://github.com/buildblocks/grunt-combine-media-queries हालांकि यह इस समय केवल न्यूनतम चौड़ाई के अनुसार ऑर्डर करता है इसलिए मुख्य रूप से मोबाइल फर्स्ट साइट्स के लिए उपयोगी है।

JohnCashmore 26 जुल॰ 2013

आईएमओ समस्या को समूह नियंत्रण के दायरे में सामान्यीकृत करने के लिए समझ में आता है जो समस्या # 930 के लिए समाधान प्रदान करेगा

danielkatz 4 अग॰ 2013

👍1

https://github.com/Se7enSky/group-css-media-queries

ivankravchenko 30 अक्तू॰ 2013

बढ़िया टूल @krava ! धन्यवाद

FranckErnewein 6 नव॰ 2013

बहुत बढ़िया!!! IMO यह सभी अर्थों में KRAVA की सुविधा को LESS . पर लागू करता है

NunoBentes 7 जन॰ 2014

+1

FrankFang 23 जन॰ 2014

मैं इसे एक प्लगइन के रूप में करना चाहता हूं। बहुत कठिन नहीं होना चाहिए। हालांकि बहुत कुछ करना है!

lukeapage 23 जन॰ 2014

मुझे लगता है कि प्लगइन्स को प्लगइन्स को ऑटो-लोड करने के लिए सिस्टम होने की तुलना में कम प्राथमिकता लेनी चाहिए (options.json)। लेकिन हाँ, एक प्लगइन एक एडिटिव फीचर के रूप में समझ में आता है।

matthew-dean 23 जन॰ 2014

क्या यह विकल्प अभी तक लागू किया गया है?
यह शायद मेरे आउटपुट सीएसएस को आधे से कम कर देगा क्योंकि मैं घटकों के भीतर मीडिया प्रश्नों का उपयोग करता हूं और उन्हें आउटपुट चरण में समूहीकृत करने में खुशी होगी।

चयनकर्ता पुनर्क्रमण के संबंध में, यदि आप किसी "समूह" कीवर्ड का उपयोग किसी ऐसी चीज़ को समूहीकृत करने के लिए करते हैं जिसे आप जानते हैं कि इसे वर्तमान तार्किक प्रवाह से हटा दिया जाएगा और समूहीकृत क्षेत्र में रखा जाएगा।

hitautodestruct 24 मार्च 2014

http://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/
इस लेख के अनुसार, मीडिया प्रश्नों को समूहीकृत करना आवश्यक नहीं है।
लेकिन एक प्लगइन अच्छा है।

FrankFang 25 मार्च 2014

यह प्रदर्शन का इतना मुद्दा नहीं है क्योंकि यह परिणामी सीएसएस फ़ाइल का आकार है। सीएसएस फ़ाइल आकार के संदर्भ में दर्जनों @media screen and (max-width: 480px) तार जुड़ना शुरू हो जाते हैं।

Soviut 25 मार्च 2014

मैंने यह प्रश्न SO पर पूछा है और किसी ने इस मुद्दे का आंशिक उत्तर दिया है।

hitautodestruct 25 मार्च 2014

@ सात-चरण-अधिकतम ने आपको उत्तर दिया और अपने उत्तर में इस मुद्दे का उल्लेख किया। बहुत मेटा;)

Soviut 25 मार्च 2014

मैं निश्चित रूप से मीडिया प्रश्नों को मर्ज करने के लिए मिक्सिन विधि को प्राथमिकता देता हूं, क्योंकि उन्हें पोस्ट प्रोसेसिंग का विरोध किया जाता है। इससे टाइपिंग में आसानी होती है और क्या और कैसे मर्ज होता है, इस पर अधिक नियंत्रण मिलता है।

यहाँ टिप्पणियों में आप मेरे द्वारा अपनी सभी परियोजनाओं में उपयोग किए जाने वाले समाधान को देख सकते हैं:
https://github.com/less/less.js/issues/950#issuecomment -17723748

gyopiazza 25 मार्च 2014

मैंने अभी एक खोज की है और दो ग्रंट प्लगइन्स पाए हैं जो मीडिया क्वेरी ग्रुपिंग करते हैं:

https://github.com/buildblocks/grunt-combine-media-queries

https://github.com/Se7enSky/grunt-group-css-media-queries

Soviut 25 मार्च 2014

मीडिया के प्रश्नों को मिलाएं गल्प के लिए भी उपलब्ध है।
http://github.com/konitter/gulp-combine-media-queries

hitautodestruct 25 मार्च 2014

चूंकि v2 आप प्लगइन्स का उपयोग कर सकते हैं, इसलिए https://github.com/bassjobsen/less-plugin-group-css-media-queries (और https://github.com/bassjobsen/less-plugin-pleeease) देखें।

bassjobsen 19 जन॰ 2015

बंद होने के बाद से यह एक प्लगइन द्वारा समर्थित है, और कोर में जाने की प्राथमिकता नहीं है (AFAIK - @less/admin सही है अगर यह गलत है)।

matthew-dean 20 जन॰ 2015

👎2

@gyopiazza मेरे पास https://github.com/less/less.js/issues/950#issuecomment -17723748 ऊपर के बारे में एक प्रश्न है: आपको मिक्सिन को इनिशियलाइज़ करने की आवश्यकता क्यों है? मेरा मतलब है, सीएसएस init के बिना संकलित करता है। मुझे लगता है कि मैं सर्वोत्तम प्रथाओं और उपयोग को समझने की कोशिश कर रहा हूं।

nfq 18 मई 2015

@nfq यह काफी प्रारंभिक नहीं है बल्कि केवल "डिफ़ॉल्ट" खाली परिभाषा है। यदि आप अपने कस्टम .step*() मिक्सिन प्रदान नहीं करते हैं तो यह आवश्यक है (अर्थात यह माना जाता है कि आपके पास ये चीजें अलग-अलग फाइलों में हो सकती हैं, उदाहरण के लिए "डिफ़ॉल्ट" .step*() परिभाषाएं और उनका प्रतिपादन कुछ सामान्य में हैं उपयोगिता/लाइब्रेरी कोड, जबकि कस्टम .step*() परिभाषाएं आपकी थीम/प्रोजेक्ट विशिष्ट कोड में हैं)।

seven-phases-max 19 मई 2015

@nfq यह वास्तव में आवश्यक नहीं है।
जैसा कि @ सात-चरण-अधिकतम उल्लेख किया गया है, यदि आप अपने कोड में मिश्रणों का उपयोग नहीं करते हैं, तो त्रुटियों से बचने के लिए यह उपयोगी है, क्योंकि मीडिया-प्रश्न गैर-मौजूद मिश्रण को बुलाएंगे।

बीटीडब्ल्यू, इस तकनीक का लाभ यह है कि मीडिया प्रश्नों के संयोजन से संकलन समय धीमा हो जाता है (थोड़ा सा)।

gyopiazza 19 मई 2015

@gyopiazza त्वरित उत्तर के लिए धन्यवाद। मुझे संकलन समय की परवाह नहीं है, और बड़ी परियोजनाओं के लिए, मैं निश्चित रूप से मुख्य स्टाइलशीट के नीचे सभी मीडिया प्रश्नों को समूहीकृत करना पसंद करता हूं। मैंने कुछ प्लगइन्स की कोशिश की लेकिन हमारे उपयोग के मामले में आपका रास्ता सबसे आसान और सबसे सुविधाजनक पाया। धन्यवाद!!

nfq 19 मई 2015

@ सात-चरण-अधिकतम धन्यवाद, आपका उत्तर समझ में आता है। मैं बहुत कम उपयोग करता हूं, लेकिन अभी तक कुछ चीजों को हासिल करने का सबसे अच्छा तरीका नहीं समझ पाया हूं!

nfq 19 मई 2015

ध्यान दें कि क्लीन-सीएसएस भी @media v3 के बाद से विलय का समर्थन करता है, और इसी तरह कम-प्लगइन-क्लीन-सीएसएस भी करता है

main.less के साथ:

header {
    color: green;

    <strong i="9">@media</strong> only screen (max-width: 500px) { color: red; }
}

footer {
    color: green;

    <strong i="10">@media</strong> only screen (max-width: 500px) { color: red; }
}

lessc --clean-css="advanced" main.less आउटपुट:
footer,header{color:green}@media only screen (max-width:500px){footer,header{color:red}}

कम-प्लगइन-क्लीन-सीएसएस डिफ़ॉल्ट रूप से --स्किप-उन्नत सत्य सेट करता है आपको @मीडिया विलय के लिए advanced विकल्प को स्पष्ट रूप से सेट करना चाहिए

bassjobsen 19 मई 2015

@nfq "मिश्रण दृष्टिकोण" के साथ मीडिया प्रश्न अभी भी नीचे संकलित हैं (या कहीं भी आप उन्हें घोषित करते हैं)।

gyopiazza 19 मई 2015

@gyopiazza धन्यवाद, हाँ। इस दृष्टिकोण से खुश !!

@bassjobsen मैं निश्चित रूप से इसे एक बड़ी परियोजना पर उपयोग करूंगा। मैंने वास्तव में अभी तक कम प्लगइन्स का उपयोग शुरू नहीं किया है। सुझावों के लिए धन्यवाद!

nfq 20 मई 2015

Less.js: समूह मीडिया प्रश्न

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

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