9 डिजाइनर डिजाइनरों के लिए मिक्स लाइब्रेरी मिलनी चाहिए

यदि आप अपने विकास वर्कफ़्लो में सैस का उपयोग करते हैं, तो आप मिश्रणों के महत्व को जानते हैं। जब आप कुछ चीजें देखते हैं जो लिखी जाती हैं सीएसएस में बार-बार और थकाऊ रूप से, यही वह जगह है जहाँ मिक्सिनेट दोहराए जाने वाले काम को रोकने में आपकी मदद कर सकते हैं। एक मिश्रण में सीएसएस घोषणाएं होती हैं जिन्हें आप अपनी साइट पर पुन: उपयोग कर सकते हैं.

डेवलपर्स द्वारा कई मिश्रण बनाए जाते हैं, जो आपके विकास में सैस के साथ काम करने में आपकी सहायता करते हैं। अधिकांश चीजें जो अक्सर सीएसएस में दोहराई जाती हैं। से कई ब्राउज़रों के पार सेवा मेरे बटन, एनिमेशन और संक्रमण प्रभाव बनाना, इसे खोजें और निम्नलिखित 11 मिक्सिन लाइब्रेरी में आपको अपने सैस के विकास के लिए मिलना चाहिए.

1. बोरबन

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

प्रत्येक उपलब्ध मिश्रण और फ़ंक्शन का उपयोग करने के लिए संपूर्ण दस्तावेज़ देखें.

2. Sass CSS3 मिक्सिन्स

Sass CSS3 मिक्सिन्स विभिन्न ब्राउज़रों में काम करने वाले मिश्रण प्रदान करते हैं। आपको यहाँ पृष्ठभूमि, बॉर्डर, बॉक्स, कॉलम, फ़ॉन्ट-फेस, ट्रांसफ़ॉर्मेशन, ट्रांस्फ़ॉर्मेशन और एनीमेशन जैसे सर्वोत्तम-प्रैक्टिस मिश्रणों का एक गुच्छा मिलेगा। यह आपकी स्टाइल की जरूरतों के लिए पर्याप्त है। उपयोग करने के लिए, आयात करें css3-mixins.scss और अपने CSS क्लास में मिक्सिन को कॉल करें.

इस मिक्सचर को यहाँ डाउनलोड करें.

3. CssOwl

CssOwl एक तत्व (सापेक्ष या निरपेक्ष) की स्थिति निर्धारित करने और छद्म चयनकर्ता के साथ सामग्री जोड़ने के लिए उपयोगी मिश्रण प्रदान करता है ( :बाद तथा : से पहले)। यह भी मदद करता है जब आप स्प्राइट तत्वों को बनाना चाहते हैं: मिक्सिन आपके स्प्राइट में छवि की स्थिति निर्धारित करने के लिए लचीलापन देता है। Sass के अलावा, Lss और Stylus के लिए CssOwl मिक्सिन लाइब्रेरी भी उपलब्ध है.

4. ब्रेकप्वाइंट सैस

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

5. स्कट

स्कूट में पुन: प्रयोज्य सैस मिश्रणों, प्लेसहोल्डर्स, फ़ंक्शंस और वैरिएबल का एक सेट होता है जो आपको सामान्य शैली-कोड पैटर्न को आसानी से लागू करने में मदद करते हैं। यह पेज लेआउट और स्टाइलिंग टाइपोग्राफी जैसी वेब सामग्री बनाने के लिए सबसे अच्छा अभ्यास कोड प्रदान करता है। कोड को अधिक बार पुन: उपयोग करके कोड लिखते समय आप पुनरावृत्ति में कटौती कर सकते हैं। इस प्रकार, आपको प्रक्रिया में अधिक संगठित होने में मदद मिलती है.

6. केसर

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

7. सेटिंग्स टाइप करें

टाइपसेटिंग Sass के लिए टूलकिट का एक प्रकार है। यह इम (रीम्स या पिक्सल के बजाय), ऊर्ध्वाधर लय और उत्तरदायी अनुपात आधारित सुर्खियों का उपयोग करके मॉड्यूलर पैमाने में फ़ॉन्ट-आकार सेट करेगा। आप इसे बोवर के साथ भी इंस्टॉल कर सकते हैं, रिलीज़ को डाउनलोड कर सकते हैं या रेपो को क्लोन कर सकते हैं। अधिक जानकारी के लिए, इसका पृष्ठ देखें.

8. सैस लाइन

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

इसका उपयोग कैसे करें के बारे में अधिक जानकारी प्राप्त करने के लिए यहां जाएं.

9. एंडी.केक्स

Andy.scss उपयोगी सास मिश्रणों का एक संग्रह है, जो आपको प्रकाश को बनाए रखते हुए आसानी से वेबसाइट के रूप को विकसित करने में मदद करने के लिए बनाया गया है। दर्जनों सास मिश्रण उपलब्ध हैं, पृष्ठभूमि से एनिमेशन तक। लगभग सभी सामान्य उपयोग किए गए सीएसएस गुण यहां कवर किए गए हैं। इसे गितुब पर प्राप्त करें.

Sass पर अधिक पोस्ट:

• सास के साथ शुरू हो रही है
• सैस में खुदाई
• कैसे उदात्त पाठ के साथ Sass संकलन करने के लिए
• बूट के साथ बूटस्ट्रैप 3 का उपयोग करना
• कैसे सास और कम्पास के साथ एक ऑनलाइन VCard बनाने के लिए
• सीएसएस Preprocessors तुलना: Sass बनाम। कम से
• Syntactically Awesome Stylesheets: Compass In Sass का उपयोग करना
• CSS को Sass और SCSS में कैसे कन्वर्ट करें