सैस की गणना प्रतिशत घटा पीएक्स

Question

मैं निम्नलिखित कार्य करने में सक्षम होना चाहता हूं:

height: 25% - 5px;

जाहिर है जब मैं ऐसा करता हूं कि मुझे त्रुटि मिलती है:

Incompatible units: 'px' and '%'.

Comments

मुझे Invalid property valueत्रुटि मिलती है । क्रोम के कैनरी बिल्ड सहित हर ब्राउज़र में।

— माइक फील्डन

अगर वहाँ एक सास समारोह है कि मुझे क्या मैं चाहता हूँ कि शांत हो जाओ, मैं बस के साथ खेल रहा था calc...

— माइक फील्डेन

हाँ :) जैसे मैंने कहा कि मुझे परवाह नहीं है कि यह कैसे हो जाता है calcक्या मैं पहले गया था और यह काम नहीं किया। ऐसा लगता है कि calcमेरे किसी भी ब्राउज़र में यह काम नहीं करता है, इसलिए एक सास कार्यान्वयन सबसे अच्छा होगा जिसका मुझे अनुमान है।

— माइक फील्डन

Sass calc () के लिए पॉलीफ़िल के रूप में कार्य नहीं कर सकता है। यह पता नहीं है कि 25% को px में कैसे परिवर्तित किया जाए ताकि यह गणित कर सके और CSS उत्पन्न कर सके। आपकी सटीक आवश्यकताओं के आधार पर, एक विकल्प हो सकता है, जैसे डिस्प्ले-टेबल परिवार का उपयोग करना, अपने बॉक्स-

— साइज़ को बदलना

Answer 1

Sass उन मानों पर अंकगणित नहीं कर सकता है जिन्हें एक इकाई से दूसरी इकाई में परिवर्तित नहीं किया जा सकता है। सैस के पास यह जानने का कोई तरीका नहीं है कि पिक्सल या किसी अन्य इकाई के संदर्भ में "100%" कितना व्यापक है। यह कुछ ऐसा है जो केवल ब्राउज़र जानता है।

आपको calc()इसके बजाय उपयोग करने की आवश्यकता है । क्या मैं उपयोग कर सकता हूं ...

.foo {
    height: calc(25% - 5px);
}

यदि आपके मूल्य चर में हैं, तो आपको प्रक्षेप का उपयोग करने की आवश्यकता हो सकती है ताकि उन्हें तार में बदल दिया जा सके (अन्यथा सैस केवल अंकगणित करने की कोशिश करता है):

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}

Comments

मैं कहूंगा कि अधिकांश ब्राउज़र में कैल्क () बिल्कुल भी काम नहीं करता है। मोबाइल प्लेटफॉर्म डेस्कटॉप की तरह ही महत्वपूर्ण हैं।

— dalgard

कोई तर्क नहीं है, लेकिन ब्राउज़रों की गिनती करें! अधिक समर्थन कैल्क () नहीं की तुलना में, और इससे भी अधिक निकट भविष्य में इसका समर्थन करेगा!

— क्रिसगंजलेज

मेरे पास कैल्क फ़ंक्शंस के अंदर एक वैरिएबल का उपयोग करके चौड़ाई थी, लेकिन यहां पाया गया: stackoverflow.com/questions/13542164/… कि मैं इस तरह से वेरिएबल का संदर्भ दे सकता हूं calc(25% - #{$var}):।

— mlunoe

मौजूदा, जारी किए गए ब्राउज़रों के संदर्भ में @ dalgard के कथन का पालन करने के लिए, इसमें काम करने वाला कैल्क अधिक काम नहीं करता है। देखें: caniuse.com/#search=calc

— imjared

तुम हमेशा जोड़कर गिरावट वापस विकल्प का उपयोग कर सकते हैं width: 22%सब से ऊपर में widthसाथ हैcalc

— Hengjie

Answer 2

calcSCSS [संकलन-समय] और CSS [रन-टाइम] दोनों में एक फ़ंक्शन है। आप बाद के बजाय पूर्व को लागू कर रहे हैं।

स्पष्ट कारणों के लिए मिक्सिंग इकाइयाँ संकलन-समय पर काम नहीं करेंगी, लेकिन रन-टाइम पर होंगी।

आप unquoteएक SCSS फ़ंक्शन का उपयोग करके बाद को बाध्य कर सकते हैं ।

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

Answer 3

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

Comments

इस सवाल का जवाब पोस्ट करने के लिए धन्यवाद! स्टैक ओवरफ्लो पर कोड-केवल उत्तर हतोत्साहित किए जाते हैं, क्योंकि बिना किसी संदर्भ के एक कोड डंप बताता है कि समाधान कैसे या क्यों काम करेगा, जिससे मूल पोस्टर (या भविष्य के किसी भी पाठक) के लिए तर्क को समझना मुश्किल हो जाएगा। कृपया, अपने प्रश्न को संपादित करें और अपने कोड का स्पष्टीकरण शामिल करें ताकि अन्य लोग आपके उत्तर से लाभान्वित हो सकें। धन्यवाद!

— मैक्सिमिलियन ल्यूमिस्टर

जिसने मुझे बचा लिया। चौड़ाई: unquote ("कैल्क (100% - # {$ लेनावव-चौड़ाई})");

— httpete

Answer 4

यदि आप कंटेनर की चौड़ाई जानते हैं, तो आप ऐसा कर सकते हैं:

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

मुझे पता है कि कई मामलों में #container की सापेक्ष चौड़ाई हो सकती है। तब यह काम नहीं करेगा।

Answer 5

पुराने धागे को पुनर्जीवित करने के लिए क्षमा करें - छद्म चयनकर्ता आपके उद्देश्य के अनुरूप हो सकता है: कम्पास का खिंचाव - जैसे। यदि आप चाहते हैं कि स्क्रीन के बाईं ओर (50% + 10px) से चौड़ाई भरने के लिए आप उपयोग कर सकें (SASS इंडेंटेड मैक्स में):

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

के बाद: तत्व 50% .example के दाईं ओर भरता है (.example की चौड़ाई के लिए 50% उपलब्ध है), फिर .example उस चौड़ाई और 10px तक खिंच जाता है।

Comments

क्या इसके लिए कहीं कम या सैस का मिश्रण है? कैल्क बहुत अच्छी तरह से काम नहीं करता है।

— v3nt

Answer 6

बस एक चर में प्रतिशत मान जोड़ें और #{$variable} उदाहरण के लिए उपयोग करें

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}