एसएएसएस गणित की गणना

Question

वीडियो की एक प्रतिक्रियाशील ग्रिड बनाने की कोशिश कर रहा है। प्रत्येक मीडिया क्वेरी के लिए अलग-अलग% का उपयोग करने के बजाय, मैं एक मानक SASS सूत्र का उपयोग करने की उम्मीद कर रहा था जो 100% चौड़ाई के आधार पर गणना करता है, हालांकि यह सुनिश्चित नहीं है कि SASS ऐसा कर सकता है या नहीं। नीचे दिए गए सूत्र में 40, खाते में 2 x 20px निश्चित मार्जिन लेता है (यानी यह 3-कॉलम ग्रिड होगा)।

आदर्श सूत्र:

ul.videos { 
    li { 
    width: ((100%/3) - 40); 
    } 
} 

किसी भी तरह से है कि सीएसएस/एस.ए.एस.एस. इस संभाल कर सकते हैं? यदि संभव हो तो जेएस का उपयोग न करना पसंद करेंगे।

Answer 1

दुर्भाग्यवश आप 33% से 40px घटा नहीं सकते हैं। SASS ब्राउज़र द्वारा व्याख्या की जाने वाली मानक सीएसएस फ़ाइल उत्पन्न करता है, और बिल्ड समय पर SASS ब्राउज़र के आयामों को नहीं जानता है।

हालांकि, अगर आप सीएसएस मार्जिन का उपयोग करके वांछित प्रभाव को प्राप्त करने में सक्षम, all major browsers में calc() का उपयोग कर किया जाना चाहिए जैसे

ul.videos { 
    li { 
    width: (100%/3); 
    div { 
     margin: 0 20px; 
    } 
    } 
} 

Answer 2

यह संभव है।

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

li { 
    display: inline-block; 
    width: calc(100%/3 - 40px); 
} 

बेशक

, आप अभी भी इस एक एस.ए.एस.एस. फ़ाइल में घोषणा कर सकते हैं, लेकिन यह एक शुद्ध सीएसएस समाधान है। एसएएसएस में यह संभव नहीं है क्योंकि एसएएसएस को पता नहीं है कि स्टाइलशीट जेनरेट होने पर 100% क्या है, और 100% का पिक्सेल मान उतार-चढ़ाव कर सकता है क्योंकि दस्तावेज़ का आकार बदलता है।

युक्ति: http://www.w3.org/TR/css3-values/#calc

Answer 3

एक और नया ब्राउज़र समाधान flexbox display type उपयोग करने के लिए किया जाएगा। ऐसा लगता है कि similar amount of support कैल्क() (वास्तव में केवल बहुत ही आधुनिक ब्राउज़र) के रूप में है।

सास, या अधिक विशेष रूप से कम्पास, यहां कुछ उपयोग होंगे क्योंकि इसमें flexbox mixins है।