css - شرح - less معنى




تعطيل LESS-CSS حساب الكتابة فوق() (4)

هذا السؤال لديه بالفعل إجابة هنا:

الآن أنا أحاول القيام بذلك في CSS3 في رمز LESS الخاص بي:

width: calc(100% - 200px);

ومع ذلك ، عندما يقوم LESS بتجميعها ، يتم إخراج هذا:

width: calc(-100%);

هل هناك طريقة لإخبار LESS بعدم تجميعها بهذه الطريقة وإخراجها بشكل طبيعي؟


باستخدام سلسلة هربت (ويعرف أيضا باسم القيمة المنجزة):

width: ~"calc(100% - 200px)";

أيضا ، في حال كنت بحاجة إلى خلط أقل الرياضيات مع سلاسل هرب:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

يجمع إلى:

width: calc(100% - 15rem + 15px + 2em);

يعمل هذا كقيم لسلسلة أقل (السلاسل المنجزة ونتائج الرياضيات) مع مساحة افتراضياً.


حلول فابريسيو تعمل على ما يرام.

A usecase of uscase common of calc هو إضافة 100٪ width وإضافة بعض الهامش حول العنصر.

يمكن للمرء القيام بذلك من خلال:

@someMarginVariable: 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
width: -o-calc(~"100% - "@someMarginVariable*2);

أو يمكن استخدام مزيج مثل:

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@[email protected])*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}

مثال لسلسلة هربت مع متغير:

@some-variable-height: 10px;

...

div {
    height: ~"calc(100vh - "@some-variable-height~")";
}

يجمع ل

div {
    height: calc(100vh - 10px );
}

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

باستخدام حساب رياضي صارم ، ستتم معالجة الرياضيات فقط التي توجد داخل أقواس غير ضرورية ، بحيث يتم تنفيذ التعليمات البرمجية:

width: calc(100% - 200px);

ستعمل كما هو متوقع مع تمكين الخيار الرياضيات صارمة.

ومع ذلك ، لاحظ أنه يتم تطبيق Strict Math عالميًا ، ليس فقط داخل calc() . هذا يعني ، إذا كان لديك:

font-size: 12px + 2px;

لن تتم معالجة الرياضيات بعد الآن - سيتم إخراج font-size: 12px + 2px وهو ، بطبيعة الحال ، CSS غير صالح. سيكون عليك أن تلتف جميع الرياضيات التي يجب معالجتها بواسطة أقواس أقل (سابقا غير ضرورية):

font-size: (12px + 2px);

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





css-calc