😟 📺 🚟 SCSS और कम्पास फ्रेमवर्क पर आलसी लेआउट 🖐🏿 🍊 ✋🏿

मैं टर्नकी वेबसाइट बनाता हूँ। डिजाइन से लेकर होस्टिंग तक। और इस आकर्षक प्रक्रिया का हिस्सा मेरे द्वारा सबसे अधिक अप्रकाशित है HTML में डिज़ाइन का लेआउट। ऐसा लगता है कि कुछ भी जटिल नहीं है, लेकिन कई नियमित चीजें बहुत थका देती हैं। इसलिए, मैं लगातार इस क्षेत्र में दिलचस्प समाधान तलाश रहा हूं।

बहुत पहले नहीं, मैंने रेल 3 पर रूबी सीखना शुरू किया और इसके लिए एक बहुत ही दिलचस्प प्लगइन पाया: कम्पास । वास्तव में, यह सीएसएस फ्रेमवर्क रेल से स्वतंत्र है और इसका उपयोग अन्य प्रकार की परियोजनाओं में किया जा सकता है।

मैं आपको बताता हूँ कि कैसे कम्पास ने मेरे जीवन को आसान बनाया।

एससीएसएस

पहली चीज जो आंख पर पड़ती है वह है फ्रेमवर्क एसएएसएस और एससीएसएस भाषाओं का उपयोग करता है। आप उनके बारे में इस प्रोजेक्ट के होम पेज पर पढ़ सकते हैं। संक्षेप में, स्टाइल शीट लिखने के लिए ये वैकल्पिक भाषाएं हैं। बेशक, संकलन के बाद का आउटपुट अभी भी सबसे सामान्य सीएसएस को छोड़ देता है, लेकिन मुख्य लाभ यह है कि ये भाषाएं शैलियों के लेखन में काफी तेजी लाती हैं।

अपने लिए, मैंने SCSS को चुना, क्योंकि यह परिचित है (इसका सिंटैक्स नियमित CSS के सिंटैक्स के समान है)। यह भाषा लेआउट डिजाइनर को 4 सुपरपावर देती है:

1. चर

बहुत बढ़िया बात! केवल इसके लिए केवल SCSS पर स्विच करना पहले से ही संभव है। एक स्थिति की कल्पना करें: आप एक पृष्ठ बना रहे हैं, जिस पर ब्लॉकों के फ्रेम का रंग और लिंक का रंग समान होना चाहिए। और अचानक ग्राहक का कहना है कि इस रंग को हल्का करना आवश्यक होगा।

.megablock { border-color: #A88; } .megablock a { text-decoration: none; color: #A88; }

और आप पूरी स्टाइलशीट में इस रंग को ढूंढ रहे हैं और बदल रहे हैं। और SCSS चर का उपयोग करते समय, इस कोड को सुगम बनाया जा सकता है और इसे और अधिक लचीला बनाया जा सकता है:

 $block-color: #A88; .megablock { border-color: $block-color; } .megablock a { text-decoration: none; color: $block-color; }

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

 $border-color - #111

2. आसक्ति

एक और बात जो शैलियों के लेखन को गति देती है। आपने कितनी बार table.cart div span a

जैसे लंबे चयनकर्ताओं को लिखा table.cart div span a

? SCSS में, आप चयनकर्ताओं को एक दूसरे में घोंसला बना सकते हैं:

 table.cart { width: 700px; div { float:left; span { font-size: 14px; a { color: $cart-link-color; } } } }

अक्सर यह भी कोड पढ़ना आसान बनाता है।

3. मिश्रण (अशुद्धता)

और फिर भी आपको अलग-अलग चयनकर्ताओं में बहुत बार समान नियम लिखने पड़ेंगे, है ना? उदाहरण के लिए, सभी ब्राउज़रों के लिए कोनों को गोल करना। SCSS आपको यहां समय बचाने की अनुमति देता है:

 #promo { background-color: $promo-bg-color; @border-radius(10px); }

इस उदाहरण में, पहली बार मैं आपको कम्पास फ्रेमवर्क की कुछ विशेषताओं को दिखाऊंगा, क्योंकि border-radius

"प्रवेश" पहले से ही अपनी क्षमताओं के मानक सेट में शामिल है।

4. चयनकर्ताओं का प्रवेश

एक और सुखदता जिसे नजरअंदाज नहीं किया जा सकता है। संक्षेप में, यह पिछले एक के समान है:

 .notification { border: 1px solid; margin: 0 auto; } .errorNotification { @extend .notification; background-color: #f11; color: #fff; }

यह अनुमान लगाना आसान है कि .errorNotification

चयनकर्ता को संकलित करते .errorNotification

, इसमें .notification

से सभी नियम शामिल .notification

कम्पास की रूपरेखा

खैर, अब, वास्तव में, ढांचे के बारे में ही। बस यह समझने के लिए कि वह एक वेब डेवलपर के जीवन को कैसे सरल बना सकता है, उसके प्रलेखन को देखें। ब्लूप्रिंट सीएसएस फ्रेमवर्क के साथ बड़ी संख्या में तैयार मिश्रण, कक्षाएं, तंग एकीकरण।

सब कुछ का वर्णन करने के लिए, निश्चित रूप से, मेरे पास पर्याप्त धैर्य नहीं होगा, लेकिन मैं ढांचे के मुख्य चिप्स से गुजरूंगा।

क्रॉसब्रोसर CSS3

प्रत्येक ब्राउज़र (वेबकीट, मोज़िला, आदि) के लिए नियम नहीं लिखने के लिए, डेवलपर्स ने सीएसएस लोशन को जल्दी से लिखने के लिए कई उपकरण शामिल किए हैं। धीमे, गोल कोनों, छाया और बहुत कुछ अब एक पंक्ति के साथ बनाया जा सकता है।

सहायकों

कम्पास में कई सहायक उपकरण भी शामिल हैं। उदाहरण के लिए, यदि आप चाहते हैं कि सभी हेडर में एक ही फ़ॉन्ट हो, तो आप headings(all)

को चयनकर्ता के रूप में उपयोग कर सकते हैं। पृष्ठ के निचले भाग में पाद को ग्लूइंग करने के लिए एक तैयार उपकरण भी है।

भाड़े और उपयोगिताएँ

हां, क्रॉस-ब्राउज़र समस्याओं से निपटने के लिए डिज़ाइन किए गए विभिन्न हैक विशेष मूल्य के हैं। फ्लोट्स, क्लीयरफिक्स, चढ़ाव आदि।

और बहुत उपयोगी उपयोगिता के एक उदाहरण के रूप में: link-colors()

का एक मिश्रण, जो आपको एक पंक्ति में सभी चार लिंक राज्यों के लिए 4 रंग सेट करने की अनुमति देता है!

खाका

अलग-अलग, यह ध्यान देने योग्य है कि कंपास ब्लूप्रिंट सीएसएस फ्रेमवर्क के सभी वर्गों को बॉक्स से बाहर का समर्थन करता है। ग्रिड, टाइपोग्राफी, फॉर्म, बटन और बाकी सब। मेरे लिए व्यक्तिगत रूप से, यह एक बहुत बड़ा प्लस था, क्योंकि ब्लूप्रिंट ने लंबे समय से तैयार कक्षाओं के लिए मेरे लिए साइटों के लेआउट की सुविधा प्रदान की है, और कम्पास के साथ बंडल एक शक्तिशाली उपकरण बन जाता है।

कुल मिलाकर

लेकिन शायद एससीएसएस और कम्पास का मुख्य लाभ यह है कि वे बहुत सरल और पारदर्शी हैं। उपरोक्त लाभों का उपयोग शुरू करने के लिए, मुझे एक घंटे से अधिक नहीं लगा।

रेल परियोजनाओं के लिए, मैं अभी कोई विकल्प नहीं देखता हूं। यद्यपि, यदि आप रुचि रखते हैं, तो आप इसे अन्य वातावरणों में उपयोग करने का प्रयास कर सकते हैं।

यदि आप भी HAML कनेक्ट करते हैं, तो पेज लेआउट का समय औसतन 2-3 गुना घट जाता है! मुझे लगता है कि किसी और तर्क की जरूरत नहीं है।

SCSS और कम्पास फ्रेमवर्क पर आलसी लेआउट