Less.js: استفسارات وسائط المجموعة

كيف تفعل ذلك دون احتمالية تغيير المعنى من خلال إعادة تنظيم العبارات؟

لا أعتقد أنه يمكن تغيير المعاني. سيكون هذا هو نفسه تمامًا مثل طي العلامات الزائدة العادية. على سبيل المثال:

body {
    background: white;
}

body {
    padding: 0;
    margin: 0;
}

سيتم تصغيره إلى:

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

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

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

ما هي القواعد حول تعقيد المحدد داخل استعلامات الوسائط؟ افعل ال
الاستعلامات تعيق التعقيد وتجاوز أي طلب؟ هل يمكنك أن تشير إلى أي
المواصفات؟

في الأساس ، نعم. محددات الوسائط هي مثل عبارات IF التي تلتف حول قواعد النمط العادية ولا تنطبق إلا إذا تم استيفاء شرط الاستعلام. على سبيل المثال ، إذا كان عرض المتصفح أقل من عدد معين من وحدات البكسل ، فعندئذٍ يتم تشغيل القواعد داخل الاستعلام وتجاوز القواعد الحالية.

لذا فإن وجود الكثير من الاستعلامات المتطابقة بنمط واحد سيكون كل منها متطابقًا وظيفيًا مع استعلام واحد مع جميع الأنماط الموجودة بداخله. طالما أن الاستعلام هو نفسه.

إليك بعض الوثائق من Mozilla

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

ما أعنيه في هذا المثال .. تحول div إلى اللون الأحمر - مما يعني أن إعادة ترتيب استعلامات الوسائط (كلاهما للشاشة) ستغير معنى css

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

يجب أن تتحد فقط إذا كانت القواعد تتبع بعضها البعض بشكل مباشر.

وهو ما لم يفعلوه في المثال الأصلي

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

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

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

على سبيل المثال ، هذا هو sprite mixin الخاص بنا:

.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)";

ثم أدناه ، نقوم بإنشاء المزيد من mixins لتغليف كل عنصر من عناصر sprite على النحو التالي:

#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();
    }

}

في هذه الحالة ، يبدو CSS الذي تم إنشاؤه كما يلي:

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 مخصص ، والذي قد يعمل مع المواقع الصغيرة ، ولكنه غير واقعي بالنسبة لموقع كبير.

هذا هو المكان الذي يكون من المنطقي تجميعهم فيه والاحتفاظ بهم منفصلين ، خاصة إذا كان لديك موقع كبير به الكثير من الوحدات (مثل موقعنا).

أنا أعرف ما تقصده بشأن تجاوز الأنماط ، ولست متأكدًا من أنه يمكنك تنفيذ هذه الميزة الدقيقة بأمان دون احتمال العبث بالتسلسل الذي قد يريده المصمم.

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

لذلك ، أود أن أكون قادرًا على القيام بذلك في ملف 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 Razor لأن هذا ما أعرفه وأحب بناء الجملة.

إنه مثال جيد .. وحالة استخدام جيدة .. يمكنك فعلها

@media-section

(أو مجموعة الوسائط) التي ستقلل بعد ذلك من تجميع الوسائط معًا (دمجها اختياريًا في استعلام الوسائط إذا كانت موجودة بالفعل مما سيسمح لك بسحب القواعد إلى أي مكان تريد وضعها فيه) .. ربما هذا هو ماذا تقصد؟

أميل إلى التفكير في أنها فكرة جيدة (وليس من الصعب تنفيذها)

+1 لـ @ media-group

+1 @ media-group

الخيار الآخر هو أن يكون لديك خيار عام لتجميع صح / خطأ.

حسنًا ، ربما تكون هذه فكرة جيدة. هل ستكون هناك أي حالة يكون فيها التجميع الانتقائي ضروريًا؟

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

+1 لخيار تجميع عالمي.

نعم .. لأننا رأينا مع @import أن إضافة كلمات رئيسية متعددة لم تكن السبيل للذهاب وإضافة خيار أقل إثارة للجدل.

أود أن أقول إضافة الخيار لأنه سيكون مفيدًا على الفور وسيكون قادرًا على التعايش كتجاوز مع استيراد انتقائي في حالة إنشائه.

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

http://mqhelper.nokturnalapp.com

أهلا!

هل هناك شخص معين لهذا؟ إنها ميزة رائعة قد تكون مفيدة جدًا لتقليل ملف css عند إنشائه بأقل. وبهذه الطريقة ، سيكون من الأسهل على المطورين العمل مع كل هذهmqs.

AoDev mqhelper هي بالتأكيد خطوة في الاتجاه الصحيح ، ويمكنني أن أرى أنها مفيدة كجزء من عملية فحص CSS في الوقت الحالي. أعتقد أنه يحتاج فقط إلى الوظيفة الأساسية المستخرجة من العناصر الأمامية في العرض التوضيحي الخاص بك.

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

لقد تمكنت بالفعل من القيام بذلك ، إنه عمل رائع ، شكرًا.

Soviutlukeapage أعتقد تجمع انتقائي يجعل معظم معانيها. كل شيء أو لا شيء يدمر الخراب في محاولة الحفاظ على الشلال. يجب أن يكون شيئًا مشابهًا للتمديد ، أو ربما يضيف كلمة أساسية للمجموعة حرفياً. مثل هذا النحو سيكون رائعًا:

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

مرحبًا ، سيكون تجميع استعلامات الوسائط إضافة رائعة حقًا. في غضون ذلك ، توصلت إلى هذه الفكرة ، وأتساءل عما إذا كان من الممكن استخدامها مع ميزة :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(); }

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

شرح kamranayub تمامًا الموقف الدقيق الذي أتعامل معه. أنا شخصياً أود أن أرى شكلاً من أشكال هذا التنفيذ. DesignByOnyx ، رمز الاختبار أدناه لا يتم تجميعه بشكل صحيح باستخدام أداة

.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) }   
  }

}

إنه لا يعمل لأنك استخدمت بنية أقل. من المفترض أن تعمل
مع CSS.
في 2 تموز (يوليو) 2013 ، الساعة 9:19 مساءً ، كتب "P Macom" [email protected] :

kamranayub https://github.com/kamranayub أوضح تمامًا بالضبط
الوضع الذي أتعامل معه. أنا شخصياً أود أن أرى شكلاً ما
من هذا التنفيذ. DesignByOnyx https://github.com/DesignByOnyx ،
لا يتم ترجمة رمز الاختبار أدناه بشكل صحيح معA oDevhttps: //github.com/AoDev 's
أداة. أنا أفضل أن أفعل هذا النوع من التصميم مثل kamranayub المذكورة.
إنه أكثر نظافة عند التعامل مع عدة ملفات أقل على المواقع الكبيرة.

.footer ul {

الهامش: 10 بكسل ؛

media @ layout-tablet، @ layout-full {
حجم الخط: 13 بكسل ؛
وزن الخط: عريض ؛
}
media @ layout-mobile {
حجم الخط: 10 بكسل ؛
المساحة المتروكة: 10 بكسل ؛
}

لي {

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

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

}
}

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/less/less.js/issues/950#issuecomment -20369038
.

هل اقتراح تشغيل المنطق المستخدم بواسطة أداة AoDev بعد معالجة LESS؟ لا أستطيع التفكير في حالة لن يكون فيها هذا ما أريده من أعلى رأسي.

هل اقتراح تشغيل المنطق المستخدم بواسطة أداة AoDev بعد معالجة LESS؟ لا أستطيع التفكير في حالة لن يكون فيها هذا ما أريده من أعلى رأسي.

أعتقد أن هذا خيار مؤقت ، سأفكر في تغليف حلAoDev في وحدة grunt.js بحيث يمكن تشغيله تلقائيًا بعد معالجة LESS (يعتمد هذا على افتراض أن المعالجة المسبقة قيد التنفيذ تم قبل النشر ، وليس أثناء التنقل)

من المؤكد أن المهمة الشريرة ستكون جيدة في الفترة المؤقتة ومفيدة عالميًا لـ CSS الخام. ومع ذلك ، بالنظر إلى مقدار ما تقوم به media magic LESS بالفعل ، يبدو خيار التجميع منطقيًا.

ثم مرة أخرى ، قد تكون مهمة Grunt قادرة على فصل استعلامات الوسائط بالكامل في ملفاتهم الخاصة ، لأولئك الذين يرغبون في تحميل أوراق أنماط الهاتف المحمول أثناء التنقل.

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

ربما يوجد مجال هنا لأداة مُحسِّن استعلام وسائط منفصلة لتجميع استعلامات الوسائط وتقسيمها اختياريًا؟

على الاطلاق. لست متأكدًا مما إذا كان CSSO قد قام بهذا بالفعل ، لكونه كاتب CSS الوحيد الذي أعرفه يحتوي أيضًا على مهمة Grunt المرتبطة به. ولكن حتى لا يمكن تقسيم أشياء مثل استعلامات الوسائط إلى ملفات منفصلة. وبالمثل ، فإن إعادة كتابتها أساسية للغاية ، بناءً على محددات وسمات متطابقة ، على عكس بنية DOM.

يمنحك Mqhelper بالفعل استعلامات وسائط فردية ، تحقق من github
الصفحة لمزيد من التفاصيل. يمكن إنشاء ملفات css المفصولة من هناك.
في 5 تموز (يوليو) 2013 ، الساعة 10:08 صباحًا ، كتب "Soviut" [email protected] :

على الاطلاق. لست متأكدًا مما إذا كان CSSO قد فعل ذلك بالفعل ، لكونه CSS الوحيد
معيد الكتابة الذي أعرفه له أيضًا مهمة Grunt مرتبطة به. لكن حتى
لا يمكن تقسيم أشياء مثل استعلامات الوسائط إلى ملفات منفصلة. بصورة مماثلة،
إعادة كتابتها أساسية للغاية ، بناءً على محددات وسمات متطابقة ،
على عكس هيكل DOM.

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/less/less.js/issues/950#issuecomment -20505834
.

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

لا أريد عدم تشجيع التحرك نحو نوع من فكرة "القسم" أو "المجموعة" لتنفيذ هذا (أعتقد أن هذا أمر جيد). ومع ذلك ، إذا رغب شخص ما في القدرة على تحديد معلومات الخاصية @media في الكود حيث يتم تعريفها لـ css العادي ، ولكن قم بتجميعها في استعلام @media في مكان آخر في الكود ، هناك هي طريقتان على الأقل يمكن القيام بهما حاليًا باستخدام وظيفة LESS ، مما يمنح تحكمًا جيدًا في الموضع ، ولكن من المسلم به أنه مع بعض الترميز الإضافي فوق ما يتطلبه الحل المقترح (لذا ، استمر في العمل على ذلك بكل الوسائل). انصح:

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

كنت أرغب في فعل شيء مثل:

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

ولكن بدون تجميع ، يكون ملف css الذي تم إنشاؤه ضخمًا بعض الشيء

/* ----- 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%;
  }
}

يوجد حل لهذا https://github.com/buildingblocks/grunt-combine-media-queries ولكنه

من المنطقي IMO تعميم المشكلة على نطاق التحكم في التجميع الذي سيوفر حلًا للمشكلة رقم 930

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

أداة عظيمة krava ! شكرا

ممتاز !!! IMO يجعل من المنطقي تطبيق ميزة KRAVA على LESS

+1

أريد أن أفعل ذلك كمكوِّن إضافي. لا ينبغي أن يكون صعبًا جدًا. الكثير لتفعله رغم ذلك!

أعتقد أن المكونات الإضافية يجب أن تأخذ أولوية أقل من وجود نظام لتحميل الإضافات تلقائيًا (options.json). لكن نعم ، يعد المكون الإضافي منطقيًا كميزة إضافية.

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

فيما يتعلق بإعادة ترتيب القاطع ، إذا كنت تستخدم كلمة رئيسية "مجموعة" لتجميع شيء ما ، فأنت تدرك أنه سيتم إزالته من التدفق المنطقي الحالي ووضعه في منطقة مجمعة.

http://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/
وفقًا لهذه المقالة ، ليس من الضروري تجميع استعلامات الوسائط.
لكن البرنامج المساعد جيد.

إنها ليست مشكلة في الأداء بقدر ما هي حجم ملف CSS الناتج. تبدأ العشرات من سلاسل <strong i="5">@media</strong> screen and (max-width: 480px) في الإضافة من حيث حجم ملف CSS.

لقد طرحت هذا السؤال على SO وأعطى شخص ما إجابة جزئية لهذه المشكلة.

@ seven-stage-max أعطاك الإجابة وأشار مرة أخرى إلى هذه المشكلة في إجابته. ميتا جدا ؛)

أنا بالتأكيد أفضل طريقة mixin لدمج استعلامات الوسائط ، بدلاً من معالجتها بعد ذلك. يتيح ذلك سهولة الكتابة والمزيد من التحكم في ما يتم دمجه وكيف.

هنا في التعليقات يمكنك رؤية الحل الذي أستخدمه في جميع مشاريعي:
https://github.com/less/less.js/issues/950#issuecomment -17723748

لقد أجريت بحثًا للتو ووجدت مكونين إضافيين grunt يقومان بتجميع استعلام الوسائط:

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

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

الجمع بين استعلامات الوسائط متاح أيضًا لـ gulp .
http://github.com/konitter/gulp-combine-media-queries

منذ الإصدار 2 يمكنك استخدام المكونات الإضافية ، لذا راجع https://github.com/bassjobsen/less-plugin-group-css-media-queries (و https://github.com/bassjobsen/less-plugin-pleeease)

يتم الإغلاق نظرًا لأن هذا مدعوم بواسطة مكون إضافي ، وليس من أولويات الانتقال إلى المركز (AFAIK - @ less / admin صحيح إذا كان هذا خطأ).

gyopiazza لدي سؤال حول https://github.com/less/less.js/issues/950#issuecomment -17723748 أعلاه: لماذا تحتاج إلى تهيئة المزيج؟ أعني أن CSS يجمع بدون الحرف الأول. أعتقد أنني أحاول فهم أفضل الممارسات والاستخدام.

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

nfq إنه ليس ضروريًا في الواقع.
كما ذكر @ Seven-

راجع للشغل ، تتمثل ميزة هذه التقنية في أن دمج استعلامات الوسائط يبطئ وقت الترجمة (قليلاً).

gyopiazza شكرا على الرد السريع. لا أمانع في وقت التجميع ، وبالنسبة للمشاريع الضخمة ، فأنا بالتأكيد أفضل تجميع جميع استعلامات الوسائط في الجزء السفلي من ورقة الأنماط الرئيسية. لقد جربت عددًا قليلاً من المكونات الإضافية ولكن وجدت طريقك هو الأسهل لحالة الاستخدام والأكثر ملاءمة. شكرا!!

@ سبع مراحل كحد أقصى شكرا ، إجابتك منطقية. أنا أستخدم أقل بكثير ، لكني لم أفهم بعد أفضل طريقة لتحقيق أشياء معينة!

لاحظ أن clean-css يدعم أيضًا دمج media منذ الإصدار 3 ، وكذلك الحال مع أقل المكون الإضافي Clean-css

مع 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}<strong i="15">@media</strong> only screen (max-width:500px){footer,header{color:red}}

يعيّن less-plugin-clean-css - تخطي - متقدمًا صوابًا افتراضيًا ، يجب عليك تعيين الخيار advanced لدمج media

nfq باستخدام "نهج mixin" ، يتم تجميع استعلامات الوسائط في الجزء السفلي (أو في أي مكان تعلن عنها).

gyopiazza شكرا ، نعم. سعيد بهذا النهج !!

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