css - कम-सीएसएस ओवरराइटिंग कैल्क अक्षम करें()




css3 less (4)

इस प्रश्न का उत्तर यहां दिया गया है:

अभी मैं अपने कम कोड में CSS3 में ऐसा करने की कोशिश कर रहा हूं:

width: calc(100% - 200px);

हालांकि, जब कम संकलन यह outputting है:

width: calc(-100%);

क्या कम से कम यह बताने का कोई तरीका है कि इसे इस तरह संकलित न करें और इसे सामान्य रूप से आउटपुट करें?


एक बच निकलने वाली स्ट्रिंग का उपयोग करना (उर्फ बच निकला मूल्य):

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

इसके अलावा, अगर आपको बच निकले तारों के साथ कम गणित मिश्रण करने की आवश्यकता है:

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

के लिए संकलित:

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

यह डिफ़ॉल्ट रूप से एक स्थान के साथ कम concatenates मूल्य (बच निकला तार और गणित परिणाम) के रूप में काम करता है।


किसी भी संपत्ति के साथ सीएसएस के calc का उपयोग करने के लिए यहां एक क्रॉस-ब्राउज़र कम मिश्रण है:

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

उदाहरण का उपयोग:

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

और सीएसएस जो आउटपुट है:

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


फैब्रिकियो के समाधान ठीक काम करता है।

कैल्क का एक बहुत ही सामान्य उपयोग 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);

या एक मिश्रण का उपयोग कर सकते हैं जैसे:

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

मेरे अन्य उत्तर में वर्णित बच निकलने वाले मूल्य का उपयोग करने के अलावा, सख्त मैथ सेटिंग को सक्षम करके इस समस्या को ठीक करना भी संभव है।

सख्त गणित के साथ, केवल गणित जो अनावश्यक कोष्ठक के अंदर हैं, संसाधित हो जाएंगे, इसलिए आपका कोड:

width: calc(100% - 200px);

सख्त गणित विकल्प सक्षम के साथ अपेक्षित काम करेगा।

हालांकि , ध्यान दें कि सख्त मठ वैश्विक स्तर पर लागू होती है, न केवल calc() अंदर। इसका मतलब है, अगर आपके पास है:

font-size: 12px + 2px;

गणित को कम से कम संसाधित नहीं किया जाएगा - यह font-size: 12px + 2px , जाहिर है, अमान्य सीएसएस। आपको उन सभी गणित को लपेटना होगा जिन्हें कम (पहले अनावश्यक) कोष्ठक द्वारा संसाधित किया जाना चाहिए:

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

सख्त मठ एक नई परियोजना शुरू करते समय विचार करने का एक अच्छा विकल्प है, अन्यथा आपको कोड बेस का एक अच्छा हिस्सा फिर से लिखना होगा। सबसे आम उपयोग मामलों के लिए, दूसरे उत्तर में वर्णित बच निकला स्ट्रिंग दृष्टिकोण अधिक उपयुक्त है।





css-calc