it-swarm.dev

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

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

width: calc(100% - 200px);

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

width: calc(-100%);

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

415
AJStacy

باستخدام سلسلة متجاوزة (a.k.a. قيمة متجاوزة):

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

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

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

يجمع إلى:

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

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

763
Fabrício Matté

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

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

width: calc(100% - 200px);

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

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

font-size: 12px + 2px;

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

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

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

62
Fabrício Matté

في ما يلي متصفح أقل استخدامًا لمتغير CSS الخاص بـ calc مع أي خاصية:

.calc(@prop; @val) {
  @{prop}: calc(~'@{val}');
  @{prop}: -moz-calc(~'@{val}');
  @{prop}: -webkit-calc(~'@{val}');
  @{prop}: -o-calc(~'@{val}');
}

مثال للاستخدام:

.calc(width; "100% - 200px");

و CSS هذا الناتج:

width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -o-calc(100% - 200px);

مشفر من هذا المثال: http://codepen.io/patrickberkeley/pen/zobdp

23
Patrick Berkeley

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

@some-variable-height: 10px;

...

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

يجمع إلى

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

حلول فابريسيو تعمل بشكل جيد.

إن usecase شائع جدا من calc هو إضافة عرض 100 ٪ وإضافة بعض الهامش حول العنصر.

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

@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);

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

.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);
}
6
Sebastien Lorber