LESS CSS में पिक्सेल द्वारा प्रतिशत से पिक्सेल तक चौड़ाई की गणना

Question

मैं पिक्सेल से प्रतिशत से कुछ तत्व में चौड़ाई की गणना करूँगा ताकि मैं कम और कैल्क () का उपयोग करके शून्य से -10 पीएक्स तक पहुंच जाऊं । यह संभव है?

div {
    span {
        width:calc(100% - 10px);
    }
}

मैं CSS3 का उपयोग calc()करता हूं इसलिए यह काम नहीं करता है:calc(100% - 10px)

उदाहरण: यदि 100% = 500px इतनी चौड़ाई = 490px (500-10);

मैंने परीक्षण के लिए एक डेमो बनाया: http://jsfiddle.net/4DujZ/55/

इसलिए पैडिंग कहेगी: 5 (10px / 2) हर समय जब मैं आकार बदल रहा हूं।

क्या मैं इसे LESS में कर सकता हूं ? मैं जानता हूँ कि jQuery और मार्जिन गद्दी वरना जैसे सरल सीएसएस में कैसे करना है ... लेकिन मैं में कार्यात्मक करने की कोशिश करेंगे कम के साथcalc()

Comments

एक सामान्य नियम के रूप में, ऐसे चयनकर्ताओं को स्टाइल न करें जिनके पास कोई शब्दार्थ नहीं है , जैसे divया span।

— पावलो

यहाँ एक क्रॉस ब्राउज़र मिक्सिन है जो मैंने किसी भी सीएसएस संपत्ति पर कैल्क का उपयोग करने के लिए लिखा था: stackoverflow.com/a/24790931/916734

— पैट्रिक बर्कले

Answer 1

calcसंकलन पर मूल्यांकन करने से रोकने के लिए आप तर्कों से बच सकते हैं ।

अपने उदाहरण का उपयोग करते हुए, आप इस तरह से तर्कों को घेर लेंगे:

calc(~'100% - 10px')

डेमो: http://jsfiddle.net/c5aq20b6/

---

मुझे लगता है कि मैं इसका उपयोग निम्नलिखित तीन तरीकों में से एक में करता हूं:

बुनियादी पलायन

calcतर्कों के अंदर सब कुछ एक स्ट्रिंग के रूप में परिभाषित किया गया है, और ग्राहक द्वारा मूल्यांकन किए जाने तक पूरी तरह से स्थिर है:

कम इनपुट

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

सीएसएस आउटपुट

div > span {
  width: calc(100% - 10px);
}

चर का अंतराल

आप स्ट्रिंग में एक LESS वेरिएबल सम्मिलित कर सकते हैं:

कम इनपुट

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

सीएसएस आउटपुट

div > span {
  width: calc(100% - 10px);
}

मिक्स्ड एस्कैप्ड एंड कम्पाइल्ड वैल्यूज़

आप प्रतिशत मूल्य से बचना चाहते हैं, लेकिन आगे जा सकते हैं और संकलन पर कुछ का मूल्यांकन कर सकते हैं:

कम इनपुट

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

सीएसएस आउटपुट

div > span {
  width: calc((100% - 10px) - 80px);
}

स्रोत: http://lesscss.org/functions/#string-functions-escape ।

Comments

तुम रॉक, यार! उन उदाहरणों और स्पष्टीकरणों के लिए धन्यवाद। क्या आपको पता है कि मैं LESS का उपयोग करके एक कंटेनर की एक अनकाउंट चौड़ाई (इसे div.categories कह सकते हैं) को 4 बराबर भागों में कैसे विभाजित कर सकता हूं?

— शॉन स्पेन्सर

@ शनस्पेनर: लाइनों के बीच में बहुत अधिक अस्पष्टता होती है। क्या आप एक JSFiddle का वर्णन कर सकते हैं जो आप हल करने की कोशिश कर रहे हैं? मैं उपयोग के मामले का अनुमान लगाने की कोशिश कर सकता हूं, लेकिन मुझे पूरी जानकारी नहीं होने से बाधित किया गया है, और मुझे यकीन है कि आप जानते हैं कि कैसे जाता है - आपके सबसे बुरे अवरोधन आपको अंत में बाहर करने के लिए प्रेरित करते हैं।

— नेचिटेटा

मैं परिपक्वता के लिए इस्तीफा देने के लिए इच्छुक नहीं हूं। जब से मैं एक सीधे सीएसएस समाधान के लिए जा रहा हूं, और जब से मैं चीजों का काम करने में सक्षम था, उत्तर में से एक का उपयोग करके, मैं अभी के लिए अच्छा हूं। हालांकि JSFiddle उदाहरण को देखने की पेशकश करने के लिए धन्यवाद। बहुत सराहना की।

— शॉन स्पेन्सर

Answer 2

मुझे लगता width: -moz-calc(25% - 1em);है कि तुम क्या देख रहे हो। और आप इस लिंक को किसी और सहायता के लिए देखना चाहते हैं

Answer 3

या, आप इस तरह मार्जिन विशेषता का उपयोग कर सकते हैं:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

Comments

ओपी चाहता है कि चौड़ाई 10px कम से कम 100% चौड़ाई हो। आपका CSS ऐसा नहीं करता है। यह इसे 100% से अधिक व्यापक बना देगा ।

— एंड्रयू बार्बर

Answer 4

इसे इस्तेमाल करे :

width:auto;
margin-right:50px;