क्या कम से कम ~ ऑपरेटर में चर का उपयोग करने का कोई तरीका है, जैसे ~ "कैल्क (100% - @ स्पेसिंग)";

Question

वहाँ कम ~ ऑपरेटर में चर का उपयोग करने के लिए एक रास्ता है,

~"calc(70% - @spacing)"; 

की तरह जब मैं इसे करने की कोशिश की है यह केवल तरह

~"calc(70% - 10px)"; 

मैं मिल सकता है स्ट्रिंग से पहले मूल्यांकन किया जाना स्थिर मूल्यों के साथ काम करता है एक संपत्ति के रूप में सेट मधुमक्खी करने के लिए।

Answer 1

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

1) केवल ऑपरेटर कि गणना से चलाता बचने और चर का उपयोग की तरह आप आमतौर पर करते

@padding: 20px; 
body { 
    padding: calc(100% ~"-" @padding); 
} 

2) भागने पूरे अभिव्यक्ति और @{padding} अंकन

@padding: 20px; 
body { 
    padding: ~"calc(100% - @{padding})"; 
} 

012 के साथ चर अंतर्वेशन

मैं दूसरा संस्करण पसंद करता हूं, क्योंकि यह javascript's template literals जैसा दिखता है और थोड़ा क्लीनर दिखता है, लेकिन कोई भी तरीका ठीक काम करता है।

दोनों समाधान स्वत: कम गणना अक्षम करें और सही परिणाम के लिए संकलन:

body { 
    padding: calc(100% - 20px); 
}