मेरे पास थोड़ी डिजाइन की स्थिति थी जहां मैं फ्लोट्स के साथ बक्से का एक तरल ग्रिड बना रहा था। मैं यह निर्दिष्ट करना चाहता था कि एक पंक्ति में कितने बक्से बहुत आसानी से थे, और उन्हें कंटेनर के दोनों किनारों के खिलाफ फ्लश किया गया था। बहुत मुश्किल नहीं है, जैसा कि हम जानते हैं कि ग्रिड को उखाड़ फेंकने और सही बॉक्स-साइज़िंग का उपयोग नहीं करने से, आप पंक्ति की चौड़ाई 25% चौड़ाई में चार फ्लोट किए गए बॉक्स प्राप्त कर सकते हैं - आसान।
लेकिन क्या होगा अगर आप बक्से के बीच मार्जिन का उपयोग करना चाहते हैं? अभी भी पूरी तरह से संभव है, बस कुछ सोच की आवश्यकता है। कहो कि आप एक पंक्ति में चार चाहते हैं, आपको यह पता लगाने की आवश्यकता होगी कि सभी मार्जिन का उपयोग करने के बाद आपने कितनी जगह छोड़ दी है। क्योंकि आप पंक्ति में पिछले एक पर मार्जिन नहीं चाहते हैं, यह 3 मार्जिन है:
100% - (3 * MARGIN)3 वास्तव में है "पंक्तियाँ जो आप शून्य से एक चाहते हैं", इसलिए:
100% - ((ROWS - 1) * MARGIN)फिर आप अपने द्वारा छोड़े गए स्थान को विभाजित करें कि आप उस पर कितने बॉक्स चाहते हैं, जैसे:
(100% - ((ROWS - 1) * MARGIN)) / ROWSआप इसके लिए सैस का उपयोग कर सकते हैं:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);इससे भी बेहतर, हम इसे एक @mixin में बनाते हैं, इसलिए हम इसे ज़रूरत पड़ने पर कभी भी कॉल कर सकते हैं:
@mixin rowMachine($numPerRow, $margin) ( width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow); &:nth-child(n) ( margin-bottom: $margin; margin-right: $margin; ) &:nth-child(#($numPerRow)n) ( margin-right: 0; margin-bottom: 0; ) )उस मुश्किल बिट के बारे में जानने के लिए वीडियो देखें: nth-child
वीडियो में, जेड लूप के साथ शुरुआत में बिट आप यहां के बारे में अधिक जान सकते हैं।
और यहाँ कलम है:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पंक्तियों के लिए सैस का उपयोग करने के लिए पेन सिंपल तकनीक देखें।