Less.js: لا تعمل وظيفة CSS3 calc () مع LESS

تم إنشاؤها على ٨ أكتوبر ٢٠١٢  ·  51تعليقات  ·  مصدر: less/less.js

أعلم أنه تم الإبلاغ عنه بالفعل ولكن تم إغلاق الأخطاء بسبب عدم كفاية المعلومات.

لدي كود CSS التالي:

#id1 {
    position: fixed;
    left: 0; top: 0;
    width: 130px;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - 130px);
}

كنت أرغب في تحويله إلى LESS باستخدام 130px كمعامل ولكن يتم ترجمة calc بواسطة LESS وهذا:

<strong i="11">@id1width</strong>: 130px
#id1 {
    position: fixed;
    left: 0; top: 0;
    width: @id1width;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - @id1width);
}

يجعل السطر الأخير ولكن يتحول إلى width: calc(-30%); وهو ما من الواضح أنه ليس المطلوب. حاولت استخدام width: ~"calc(100% - @id1width)"; لكنه يجعل @id1width غير مترجم.

أعتقد أنه لا ينبغي على LESS استخدام الأشياء المحفوظة بواسطة CSS3 لاستخدامها الداخلي ...

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

ربما تم إغلاقها كنسخ مكررة .. على الرغم من أنني لا أستطيع العثور على واحد حول الحساب .. انظر # 146 # 122 و # 915

الحل: width: ~"calc(100% - @{id1width})"; - لاحظ الأقواس المتعرجة حول المتغير.

نحن ننتقل إلى نظام حيث سيتم فقط تقييم الأشياء الموجودة داخل الأقواس لإصلاح هذه المشكلة.

ال 51 كومينتر

ربما تم إغلاقها كنسخ مكررة .. على الرغم من أنني لا أستطيع العثور على واحد حول الحساب .. انظر # 146 # 122 و # 915

الحل: width: ~"calc(100% - @{id1width})"; - لاحظ الأقواس المتعرجة حول المتغير.

نحن ننتقل إلى نظام حيث سيتم فقط تقييم الأشياء الموجودة داخل الأقواس لإصلاح هذه المشكلة.

: +1:

<strong i="5">@rows</strong>: 10;

<strong i="6">@row1</strong>: 1 / <strong i="7">@rows</strong> * 100%;

.featured1
{
  top: ~'-webkit-calc(@{row1} + 20px)';
  right: 0;
  bottom: @row5;
  left: @col9;
}

هذا القليل من LESS سيعالج قيمة " @ row1 " لتصبح 10٪ ، وهو أمر رائع. ولكن عندما يكون داخل seciton هارب من LESS وملفوفًا في مجعد للاحتفاظ بالمتغير LESS ، فإنه يُرجع '10' بدون '٪'.

لقد وجدت حلاً لم يخذلني بعد. إذا قمت بوضع '٪' آخر بعد إغلاق مجعد متغير 'row1' داخل الكود الذي تم تجاوزه ، فسوف يعمل بشكل صحيح ...

~'-webkit-calc(@{row1}% + 20px)';

ولكن هذا يبدو وكأنه اختراق لإضافة نوع وحدة آخر من المفترض أنه موجود بالفعل في المتغير.

jonjohnjohnson هذا ثابت في الرأس وسيكون في 1.3.2

سيتم حل بقية هذا الخطأ في 1.4.0

لست متأكدًا مما إذا كانت هذه هي نفس المشكلة ، ولكن لدي مشكلة في ما يلي. لاحظ أنه لا توجد أشياء أقل تحديدًا هنا ، فأقل من 1.3.3 يتم تشغيل CSS بطريقة أخرى.

هنا CSS

html, body {
    margin:0, padding:0, border:0;
    height: 100%;
}

#content {
    height: -webkit-calc(100% - 40px);
    height: calc(100% - 40px);
    background-color:gray;
}

#footer {
    background-color:black;
}

وإليك HTML لتضمينها

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet/less" type="text/css" href="test.css" />
<script src="less-1.3.3.min.js"></script>
<body>
<div id="content"></div>
<div id="footer" style="height:40px"></div>
</body>
</html>

يتم تعيين "المحتوى" على ارتفاع 60٪ ، لذا فإن القليل من التحليل هو الحل غير الصحيح لتعبير الحساب بدلاً من تمريره دون تغيير إلى المتصفح. تم الاختبار في Safari 6.0.2 و Firefox.

ثابت على ماستر 1.4.0

height: ~"calc(100% - 50px)";

لا يزال ينتج:

height: calc(50%);

لي. أريد:

height: calc(100% - 50px);

علاوة على ذلك ، لا يزال ينتج height: calc(50%); حتى مع ضبط الرياضيات الصارمة على on .

OliverJAsh لا يمكنني إعادة إنتاج نتائجك بأقل من 1.7.0 (كلاهما قيمة تم --strict-math:on يعملان كما هو متوقع) ... هل يمكنك تقديم مزيد من التفاصيل حول المترجم / البيئة / البرامج النصية التي تستخدمها؟ (فقط في حالة وجود مشكلة في إنشاء برنامج Bootstrap والتي قد تؤدي إلى مثل هذه النتائج غير الصحيحة: https://github.com/twbs/bootstrap/issues/13604 ، فربما تكون هذه هي حالتك أيضًا؟).

كنت أواجه هذه المشكلة في 1.6.3 (لسبب ما ، يقوم WinLESS بالتحويل إلى التحويل البرمجي عندما أقوم بالترقية إلى 1.7.x ، لذلك أنا متمسك بـ 1.6.x في الوقت الحالي)

كان إصلاحي السريع فقط للهروب من جزء واحد من المعادلة مثل:

height: calc(~"100%" - unit(<strong i="7">@var</strong>, px));

هذا حتى مع المتغيرات ، مثل <strong i="10">@var</strong>: 50 . أو يمكنك الهروب من العملية الحسابية بأكملها مثل calc(~"100% - 50px");

twiginteractive إذا كان عليك استخدام الهروب باستخدام --strict-math option off (الإعداد الافتراضي) ، فهذه ليست مشكلة ولكن السلوك المتوقع. انظر --strict-math .

@ Seven-stage-max Hmmm - وفقًا للمستندات ، مع إيقاف SM (افتراضي) ، ثم _يجب_ تحليلها بشكل صحيح (أي لم يتم لمسها)
height: calc(100% - 10px);

لكنها لا تفعل ذلك. الناتج CSS هو height: calc(90%); ، وهي ليست النتيجة المرجوة. ربما تم إصلاح هذا في 1.7 ، ولكن كما أقول لا يمكنني استخدام هذا الإصدار في الوقت الحالي حتى أكتشف ما الذي يكسر تجميع WinLESS.

(ما لم أخطئ في قراءة المستندات عندما تقول "ستتم معالجتها بشكل صحيح" ... لم يتمكن LESS من معرفة قيمة 100٪ ، لذلك لا ينبغي إجراء عملية حسابية على "100٪ - 10 بكسل")

تضمين التغريدة

وفقًا للمستندات ، مع إيقاف SM (افتراضي) ، يجب تحليل ذلك بشكل صحيح (أي لم يتم لمسه)

لا ، كلمة هناك currently وليس correctly (على سبيل المثال ، "سيتم _تم معالجتها_ حاليًا").

@ سبع مراحل - ماكس آه - يا سيئة ، فمن المنطقي الآن. شكرا على التوضيح.

الارتفاع: ~ "احسب (100٪ - 50 بكسل)" ؛ عملت من أجلي.

هذا هو المكان الذي تبدأ فيه Less.js في العبث برمزك.

height: _calc(50%);
height: calc(100% - 50%); /* browser-native */

تضمين التغريدة

من المفترض أن v2.0 سيكون لديه خيار بادئة وظائفه مثل:

لن يؤثر هذا على calc بأي شكل من الأشكال. لا توجد وظيفة مضمنة calc ، فالأقل هو مجرد تقييم تعبير رياضي وفقًا لقواعده (أقل). هذا كل شيء. إذا كنت لا تريد هذه "الفوضى" ، فاستخدم --strict-math .

ملاحظة: الحل لهذه المشكلة هو الرياضيات الصارمة. وربما يجب علينا ذلك
فرض العمليات الحسابية الصارمة عند إجراء مكالمة لحساب؟

تمتد المشكلة عند استخدام Myth after Less.

لماذا ا؟ هل الأسطورة تزيل الأقواس؟ تجعل الرياضيات الصارمة مجموعة شاملة أقل
من المغلق.

وربما يجب علينا فرض عمليات حسابية صارمة عند إجراء مكالمة لحسابها؟

لقد ناقشنا هذا في # 1872 وهناك بعض الحجج ضد الحلول البديلة "المحلية الصارمة - الرياضيات: في ". الحل المقترح (لم يتقرر بعد) في # 1880.

تضمين التغريدة

حتى مع تطبيقrictMath ، نحتاج إلى "احسب (...)" حتى يتجاهلها Less.

مثال؟ أي مقتطف حيث يقوم Less بتثبيت تعبير داخل calc بـ --strict-math=on .

منذ متى ستعمل بادئة v2؟ هل قررنا ذلك ونسيت؟

منذ متى ستعمل بادئة v2؟ هل قررنا ذلك ونسيت؟

لا ، أعتقد أنه تم المبالغة في تقدير هذا قليلاً https://github.com/less/less.js/issues/2102#issuecomment -50286985.

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

لقد لاحظت شيئًا غريبًا يحدث مع calc عند استخدامه بالاقتران مع width . لقد وضعت كل شيء في رمز الشفرة فقط لتسهيل الأمر: http://codepen.io/anon/pen/OVpJvP

alenb

إذن ما هو الغريب هناك؟ يتم تجميع الكود الموجود في رمزك البرمجي كما هو متوقع ...

@ سبع مراحل كحد أقصى

لقد تم تجميعها ، لكنها ليست ما هو متوقع. تحقق من كود CSS عن كثب.

إنه أمر غريب لأنه لا يزال به فجوة في أقصى اليمين على الرغم من أنه يجب أن يمتد بالكامل مع الأعمدة الثلاثة. يجب أن يكون العمودان الأولان 33.33٪ ناقص 20 بكسل بحيث يكون العمود الأخير 33.33٪. سيكون للأعمدة الأولى والثانية مساحة مساحة على اليمين تبلغ 20 بكسل ، ولكن هذا لا ينعكس حيث من الواضح أن هناك فجوة في أقصى اليمين.

لقد لعبت أكثر معها الليلة الماضية و margin-right بدلاً من padding-right يقوم بالخدعة ويحل المشكلة.

alenb

لقد تم تجميعها ، لكنها ليست ما هو متوقع. تحقق من كود CSS عن كثب.

بالتأكيد فعلت. لذلك إذا كنت تتوقع شيئًا مختلفًا - يرجى التحديد.

سيكون للأعمدة الأولى والثانية مساحة مساحة على اليمين تبلغ 20 بكسل ، ولكن هذا لا ينعكس

لا يؤثر padding على العرض بأي شكل من الأشكال (إلا إذا قمت بتعيين [ box-sizing ] محددًا (https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing )), consult [CSS specs](http://www.w3.org/TR/REC-CSS2/box.html). So you simply get : (33٪ - 20px) + (33٪ - 20px) + 33٪ = 99٪ - 40px -> 40px` فجوة كما هو متوقع.

في كلتا الحالتين ، يرتبط هذا فقط بـ CSS وليس له علاقة بكيفية قيام Less بتجميع calc . انقر فوق الزر "عرض مجمَّع" في رمز رمز الشفرة وهناك ترى أن كشوفاتك calc يتم تجميعها بواسطة أقل بالضبط إلى ما حددته).

@ سبع مراحل كحد أقصى

كنت أعتقد أن codepen سيجعل هذا واضحًا ، لكن لا توجد مشكلة على الإطلاق.

شكرا للمعلومة!

اليوم لا يزال لا يعمل مع التثبيت الافتراضي الأقل (باستخدام npm).

كان علي استخدام:
min-height: ~"calc(100% - 262px)"; //calc(100% - 262px);

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

تضمين التغريدة

حسنًا ، سأحاول ذلك ، شكرًا لك! لكن أليس من الأفضل أن يكون عليه
إفتراضي؟ لأنه من المدهش تمامًا ، عندما لا تعرف شيئًا عن هذا
معامل.

شكرا على كل حال!

لو فين. 8 avr. 2016 في الساعة 20:48 ، إخطارات ماكس ميخائيلوف@github.com أ
écrit:

RenaudParis https://github.com/RenaudParis - الرياضيات الصارمة
http://lesscss.org/usage/#command -line-Usage-strict-math

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub
https://github.com/less/less.js/issues/974#issuecomment -207553212

لكن ألن يكون من الأفضل أن يكون ذلك افتراضيًا؟

سيؤدي جعله إلى الوضع الافتراضي إلى كسر الكثير من قواعد الرموز الأقل الموجودة. مرة واحدة (عند ~ v1.4.0 ) كانت هناك محاولة لجعله افتراضيًا في الواقع ، ولكن تم عكسه بعد ذلك بسبب التوافق مع الإصدارات القديمة ... تم تطوير طريقة أحدث وأقل تدخلاً في # 1880 (ولكن لم يتم تنفيذه بعد).

حسنًا ، شكرًا لك على الوقت الذي قضيته في شرحه لي ماكس!

لو سام. 9 avr. 2016 13:46، Max Mikhailov [email protected] أ
écrit:

لكن أليس من الأفضل أن يكون عليه
إفتراضي؟

سيؤدي جعله إلى الوضع الافتراضي إلى كسر الكثير من قواعد الرموز الأقل الموجودة. مرة واحدة
(في ~ v1.4.0) كانت هناك محاولة لجعله افتراضيًا في الواقع ، ولكن
ثم يتم عكسه بسبب التوافق مع الإصدارات السابقة ...
تم تطوير طريقة أقل تدخلاً في # 1880
https://github.com/less/less.js/issues/1880 (لكن لم يتم تنفيذه
بعد)).

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub
https://github.com/less/less.js/issues/974#issuecomment -207776654

لقد قمت بحل هذا:

.calc(<strong i="6">@prop</strong>, @val) {
    @{prop}: ~"calc(~'@{val}')";
    @{prop}: ~"-moz-calc(~'@{val}')";
    @{prop}: ~"-webkit-calc(~'@{val}')";
    @{prop}: ~"-o-calc(~'@{val}');"
}
.calc(width, "80% - 36px");

عندما أستخدم command line فهذا صحيح. فقط less-loader غير صحيح. لذلك وجدت هذا الحل في stackoverflow

أنا أنسخه إلى الكود الخاص بي ، ولكن للأسف ليس صحيحًا أيضًا. لذلك قمت بتعديل شيء ما. إنها تعمل!

لسوء الحظ ، سطر الأوامر غير صحيح !! 😂 😂 😂

لست متأكدًا من سبب إغلاق هذه المشكلة. ليس من المنطقي أن يغير Less سلوك CSS الأصلي.

... أقل سيغير سلوك CSS الأصلي.

أنه لن. ما عليك سوى تعيين --strict-math=on (لم يتم تمكينه افتراضيًا بسبب التوافق مع كمية هائلة من المشاريع الأقل اعتمادًا على --strict-math=off ، بالإضافة إلى بعض الاعتبارات المذكورة في # 1880).

في سمة UIkit 3 ، أستخدم هذا في my_theme.less :

height: ~"calc(100vh - 20px)";

ويعمل.

لقد نجحت معي عند الكتابة في ملف * .less https://github.com/less/less.js/issues/974#issuecomment -9229470

شكرا lukeapage ! 🥇

مرحبًا mqliutie شكرًا لإضافة اقتراح mixin لـ calc ، ولكن هناك ~ إضافي في Mixin الخاص بك كان يكسر التجميع:

يجب أن يكون mixin

.calc(<strong i="8">@prop</strong>, @val) {
    @{prop}: ~"-webkit-calc('@{val}')";
    @{prop}: ~"-moz-calc('@{val}')";
    @{prop}: ~"calc('@{val}')";
}

الإدخال على النحو التالي:
.calc (العرض ، "100٪ - 60 بكسل") ؛

الإخراج على النحو التالي:
العرض: احسب (100٪ - 60 بكسل) ؛

لماذا تم إغلاق هذا العدد ؟! انها ليست ثابتة.

ما زلت أتلقى calc(30%) عندما أكتب calc(50% - 20px) . هذا هو أبدا ما يريد أي شخص. بصرف النظر عن حقيقة أنه من الخطأ إجراء حساب أعمى باستخدام وحدات مختلفة ، يجب تركها كما هي في الحساب () ، إلا إذا كان من الممكن حسابها بموثوقية 100٪ (مثل الوحدات نفسها). أنا أستخدم LESS 2.7.3.

يرجى إعادة فتح هذه المشكلة.

thany
بالرجوع إلى هذه التعليقات ، يصفون كيف أن هذه ليست مشكلة بالضبط ، بقدر ما يعد الإعداد الافتراضي للمعالجة الرياضية منتجًا ثانويًا للتاريخ ، ويمكنك دائمًا تغيير الإعداد الافتراضي.
https://github.com/less/less.js/issues/974#issuecomment -207553212
https://github.com/less/less.js/issues/974#issuecomment -207776654

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

بغض النظر عن كيفية طرحها ، لم يتم إصلاح هذه المشكلة بأي تعريف.

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

thany

ثم يجب أن يكون في وضع التشغيل بشكل افتراضي.

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

لماذا تم إغلاق هذا العدد ؟!

لأن المناقشة المحدثة حول كيفية تحسين السلوك الافتراضي موجودة هنا .

thany As @

 width: 15%;
 height: ~"calc(width)";

كيفية جعل الارتفاع = العرض

@ xiaomizhou66
هذا ليس له علاقة بـ LESS ، ولا بهذه المشكلة. إنه سؤال CSS محض. الرجاء البحث عن شيء مثل "css keep" وستجد بعض الإجابات.

لذلك لا يزال هذا مكسورًا. يخرج calc (100vh - 138px) إلى -38 بكسل.

تضمين التغريدة

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

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات