एसएएसएस में प्रतिशत से पिक्सेल घटाएं?

Question

मुझे पता है कि आप सास/एसएसएस में कुछ सरल गणित करने में सक्षम हैं। लेकिन प्रतिशत से पिक्सल घटाने का कोई तरीका है? उदाहरण के लिए:

$image-size: 200px; 

.bio { 
    width: 100% - $image-size; 
} 

Answer 1

मुझे नहीं लगता कि यह कैसे काम करेगा, तथ्य यह है कि SASS आपके बॉक्स के आकार को जादुई रूप से नहीं जान सकता है।

अब अगर मैं जो करने की कोशिश कर रहा हूं, तो मुझे सबसे अच्छा समाधान होगा। बॉक्स की मूल चौड़ाई को एक चर में लपेटना होगा और फिर अपनी छवि चौड़ाई उस चर पर घटाएगी - 100% चौड़ाई पर विचार करने का मतलब है कि इसे 100% एक निश्चित चौड़ाई।

Answer 2

आप जो चाहते हैं उसे प्राप्त करने के लिए calc() फ़ंक्शन का उपयोग कर सकते हैं। यह प्रयोगात्मक है लेकिन अभी भी विभिन्न ब्राउज़रों द्वारा pretty good supported है।

@mixin calc($key, $value) { 
    #{$key}: -webkit-calc(#{$value}); 
    #{$key}: -moz-calc(#{$value}); 
    #{$key}: calc(#{$value}); 
} 

और से कॉल करने की:

के साथ सास, तो आप इस -webkit और -moz उपसर्गों के साथ पर काम कर अधिक ब्राउज़र संस्करणों (ओपेरा एक की कोई जरूरत नहीं) प्राप्त करने के लिए एक calc mixin बना सकते हैं कुछ ऐसा:

.bio { 
    @include calc("width", "100% - #{$image-size}"); 
}