CSS3 कैल्क के साथ कम आक्रामक संकलन

Question

कम compilers है कि मैं (उपयोग कर रहा हूँ OrangeBits और dotless 1.3.0.5 ) आक्रामक तरीके से अनुवाद कर रहे हैं

body { width: calc(100% - 250px - 1.5em); }

में

body { width: calc(-151.5%); }

जो स्पष्ट रूप से वांछित नहीं है। मैं सोच रहा हूँ कि कम संकलक को संकेत करने का एक तरीका है, अनिवार्य रूप से संकलन के दौरान विशेषता को अनदेखा करना। मैंने कम प्रलेखन और दोनों संकलक के प्रलेखन के माध्यम से खोज की है, और मुझे कुछ भी नहीं मिला।

क्या कम या कम संकलक इसका समर्थन करता है?

यदि नहीं, तो क्या कोई सीएसएस एक्सटेंडर है जो करता है?

Comments

क्या आप वाकई एक कंपाइलर कम एग्रेसिव नहीं चाहते हैं?

— फिएटजैफ

मुझे बहुत यकीन है, यह भी चाहते हैं कि कंपाइलर अधिक आक्रामक हो! (पिछली टिप्पणी में डबल निषेध मुझे उलझन में;)) (ताकि अपने वोट अच्छी तरह से नीचे) अच्छा सुविधा के लिए के रूप में

— एंड्रियास Dietrich

Answer 1

कम अब calcडिफ़ॉल्ट रूप से अंदर अभिव्यक्ति का मूल्यांकन नहीं करता है v3.00।

---

मूल उत्तर ( Less v1.x...2.x):

यह करो:

body { width: calc(~"100% - 250px - 1.5em"); }

कम 1.4.0 में हमारे पास एक strictMathsविकल्प होगा जिसमें सभी कम गणनाओं को कोष्ठक के भीतर होना चाहिए, इसलिए calc"आउट-ऑफ-द-बॉक्स" काम करेगा। यह एक विकल्प है क्योंकि यह एक बड़ा परिवर्तन है। 1.4.0 के शुरुआती बेटों में डिफ़ॉल्ट रूप से यह विकल्प था। रिलीज़ संस्करण डिफ़ॉल्ट रूप से बंद है।

Comments

ध्यान दें कि यदि आप ट्विटर के अवकाश के साथ कम संकलन कर रहे हैं तो यह इस पलायन को अनदेखा करता है । कम से कम इस टिप्पणी को लिखने के समय।

— अत्तिला फुलोप

मैंने सिर्फ calc(100% - 50px)1.4.css में कोशिश की थी और परिणाम था calc(50%)। भयानक ~"..."चाल काम करना जारी रखती है, लेकिन मैं "आउट-ऑफ-द-बॉक्स" बयान से भ्रमित हूं, जिससे मुझे लगता है कि ऊपर काम करेगा। ल्यूक, calc1.4.0 में परिवर्तन के लिए समर्थन कैसे करता है ? धन्यवाद!

— ब्रायन एम। हंट

सवाल यह है कि पहले स्थान पर इसकी गणना करने का प्रयास क्यों नहीं किया गया? इसे "100% - 250px" के लिए एक त्रुटि फेंकनी चाहिए क्योंकि यह एक समझदार उत्तर की गणना नहीं कर सकता है।

— एमपीएन

भविष्य के पाठकों के लिए, आप बस ऑपरेटर से बच सकते हैं, जिससे आप चर भी उपयोग कर सकते हैं। उदाहरण:calc(@somePercent ~"-" @someLength)

— 0b10011

इसे कम मिसकॉल करने या एक त्रुटि को फेंकने के बजाय यह क्यों महसूस नहीं कर सकता है कि उपयोगकर्ता इसे अकेले करने और छोड़ने की कोशिश कर रहा है? स्पष्ट रूप से प्रतिशत और पिक्सेल मान की गणना कम में एक साथ नहीं की जा सकती है।

— dfmiller

Answer 2

कैल्क का एक बहुत ही सामान्य usecase 100% चौड़ाई और तत्व के चारों ओर कुछ मार्जिन जोड़ रहा है।

एक के साथ ऐसा कर सकते हैं:

@someMarginVariable = 15px;

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

Comments

-o-calc- अभी तक समर्थित नहीं है ।

— एक और

Answer 3

एक ही परिणाम के साथ कई भागने के विकल्प हैं:

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }

Answer 4

इस पोस्ट में बताया गया है कि CSS3 कैल्क () फ़ंक्शन कम # 974 के साथ काम नहीं करता है , इस प्रकार समझाया गया कैल्क के अंदर वेरिएबल्स को शामिल करने का एक आसान तरीका है।

@variable: 2em;

body{ width: calc(~"100% - @{variable} * 2");}

घुंघराले कोष्ठक का उपयोग करके आपको भागने वाले उद्धरणों को बंद करने और फिर से खोलने की आवश्यकता नहीं है।