सास प्रतिशत शून्य से पिक्सल

Question

मैं सक्षम होना चाहते हैं की गणना निम्न कार्य करें: जाहिर है

height: 25% - 5px; 

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

Incompatible units: 'px' and '%'. 

Answer 1

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

इसके बजाय आपको calc() का उपयोग करने की आवश्यकता है। Check browser compatibility on Can I use...

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

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

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

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

Answer 2

अगर आप की चौड़ाई पता कंटेनर, आप ऐसा कर सकते हैं:

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

मुझे पता है कि कई मामलों में # कंटेनर एक रिलेट हो सकता है ive चौड़ाई। तो यह काम नहीं करेगा।

Answer 3

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

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

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

Answer 4

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

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

आप बाद में unquote, एक एससीएसएस फ़ंक्शन का उपयोग कर मजबूर कर सकते हैं।

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

Answer 5

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