सैस ट्यूटोरियल कम्पास और कम्पास के साथ एक ऑनलाइन vCard बिल्डिंग

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

विचार यह है कि vCard रंग और आकार के लिए आसानी से समायोज्य होना चाहिए। इस प्रक्रिया में, हम कुछ Sass और Compass जैसी सुविधाओं का उपयोग करेंगे चर, मिश्रण, संचालन, चयनकर्ता वंशानुक्रम, नेस्टेड नियम तथा कम्पास सहायक. यदि आप इस श्रृंखला से हमारे पिछले पोस्टों को याद कर चुके हैं, तो हमारा सुझाव है कि आप जारी रखने से पहले उन पर एक नज़र डालें.

योजना और वायरफ्रेमिंग

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

जैसा कि आप ऊपर की छवि से देख सकते हैं, हमारे vCard में है संपर्क सूचना 'जॉन' के बारे में - एक तस्वीर प्रोफ़ाइल, जॉन के बारे में कुछ जानकारी, जैसे उसका नाम, ईमेल पता, फोन नंबर और एक संक्षिप्त विवरण कि वह कौन है या वह क्या करता है। वह हमारा will बायो ’सेक्शन होगा.

नीचे सामाजिक बटन के रूप में उनकी सामाजिक पहचान हैं। यह हमारा 'सामाजिक' खंड होगा.

एसेट्स तैयार करना

इससे पहले कि हम कोडिंग शुरू करें, यहां कुछ आवश्यक चीजें तैयार हैं। मैं इकट्ठा करता हूं कि अब तक आपको अपने मशीन में सैस और कम्पास स्थापित कर लेना चाहिए.

(यदि आप सुनिश्चित नहीं हैं कि आपने उन्हें स्थापित किया है, तो आप यह कमांड चला सकते हैं sass -v या कम्पास -v के माध्यम से कमांड प्रॉम्प्ट या टर्मिनल या, यदि आप GUI के साथ काम करना पसंद करते हैं, तो आप हमेशा स्काउट ऐप जैसे एप्लिकेशन का उपयोग कर सकते हैं।)

हमें फॉन्ट आइकॉन और सोशल मीडिया आइकॉन जैसी कुछ संपत्तियों की भी आवश्यकता होगी, जिन्हें आप मॉडर्नपिकोग्राम जैसी जगहों से प्राप्त कर सकते हैं.

अंत में, चूंकि हम इस ट्यूटोरियल के लिए कमांड प्रॉम्प्ट / टर्मिनल का उपयोग कर रहे हैं, हमें अपनी निर्देशिका में नेविगेट करने और दो प्रोग्राम के साथ कम्पास प्रोजेक्ट चलाने की आवश्यकता है: कम्पास init तथा कम्पास घड़ी.

HTML मार्कअप

नीचे हमारे vCard का HTML मार्कअप है, यह बहुत सीधा है। सभी अनुभाग तार्किक HTML5 टैग में लिपटे हुए हैं

      थोरीक फिरदौस
 [email protected]
 (+62) 1.2345.678.9
 लोरम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। सस्पेंडिस डोलर नेक, पेइलेसेकस क्विस पर एलिफेंड, एंटलिस एमेट टेलस। एटिअम एट नीलाम अरकु.
 
 
 
   फेसबुक
  ट्विटर
 गूगल+
 Dribbble

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

कम्पास विन्यास

हमें कुछ पंक्तियों को जोड़कर कम्पास को थोड़ा कॉन्फ़िगर करने की आवश्यकता है config.rb फ़ाइल, निम्नानुसार है:

 # आप यहां अपनी पसंदीदा आउटपुट शैली का चयन कर सकते हैं (कमांड लाइन के माध्यम से ओवरराइड किया जा सकता है): output_style =: विस्तारित # कम्पास सहायक कार्यों के माध्यम से संपत्ति के सापेक्ष पथ को सक्षम करने के लिए। Uncomment: relation_assets = true # डिबगिंग टिप्पणियों को अक्षम करने के लिए जो आपके चयनकर्ताओं के मूल स्थान को प्रदर्शित करती हैं। अयोग्यता: line_comments = false

अगर तुम नहीं पा सकते config.rb फ़ाइल, आपने शायद यह कमांड नहीं चलाया है कम्पास init आपकी परियोजना निर्देशिका में.

फ़ाइलें आयात करना

चूंकि हम कम्पास का उपयोग कर रहे हैं, हमें इसका उपयोग करके आयात करना होगा;

 @import "कम्पास";

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

 @import "कम्पास / रीसेट";

हालांकि, मैं सामान्य रूप से धन्यवाद का उपयोग करना पसंद करता हूं Sass / Scss प्रारूप में भी आता है. फाइल को यहां डाउनलोड करें, इसमें सेव करें सास कार्यशील निर्देशिका और इसे हमारी स्टाइलशीट में आयात करें.

 @import "सामान्यीकृत करें";

अनुशंसित पाठ: समीक्षा सीएसएस शैली प्राथमिकता स्तर

चर

हम निश्चित रूप से स्टाइलशीट में कुछ निरंतर मान रखेंगे, इस प्रकार हम उन्हें चर में संग्रहीत करेंगे और नीचे दिए गए ये दो चर हमारे vCard के आधार रंग को परिभाषित करेंगे.

 $ आधार: #fff; $ अंधेरा: गहरा ($ आधार, 10%);

जबकि $ चौड़ाई नीचे चर हमारे पृष्ठ की चौड़ाई होगी; यह अन्य तत्व आकारों को परिभाषित करने का आधार भी होगा.

 $ चौड़ाई: 500 पीएक्स; $ अंतरिक्ष: $ चौड़ाई / 25; // = 20 पीएक्स

और यह $ अंतरिक्ष चर, जैसा कि आप देख सकते हैं, हमारे vCard में डिफ़ॉल्ट रिक्ति या स्तंभ आकार होगा जो इस उदाहरण में होगा 20px;

कम्पास में छवि आकार का पता लगाने के लिए हेल्पर्स भी हैं और हम अपने चित्र प्रोफाइल पर इस सुविधा का उपयोग निम्नानुसार करेंगे;

 $ img: छवि-चौड़ाई ("me.jpg") + (($ स्थान / 4) * 2);

अतिरिक्त इसके अलावा का (($ स्पेस / 4) * 2) ऊपर दिए गए कोड में, सीमा सहित कुल छवि चौड़ाई की गणना करना है जो चित्र को फ्रेम करेगा। एक फ्रेम में आम तौर पर दो पक्ष होते हैं; ऊपर और नीचे / बाएँ और दाएँ, यही कारण है कि हम गुणा करते हैं विभाजन का परिणाम द्वारा 2.

चयनकर्ता वंशानुक्रम

हमारे स्टाइलशीट में स्पष्ट रूप से कुछ चयनकर्ता हैं जिनके पास समान स्टाइल नियम होंगे। हमारे कोड में पुनरावृत्ति से बचने के लिए, हमें इन शैलियों को पहली जगह में निर्दिष्ट करना होगा और उन्हें इनहेरिट करना होगा @extend जब भी जरूरत हो निर्देशन करें। सास में इस विधि, के रूप में जाना जाता है चयनकर्ता वंशानुक्रम, एक बहुत ही उपयोगी सुविधा जो LESS में गुम है.

 .फ्लोट-लेफ्ट फ्लोट: लेफ्ट;  .box-sizing @include box-sizing (बॉर्डर-बॉक्स);

शैलियाँ

जब आवश्यक है कि सभी सेटअप किया गया है, तो यह हमारे vCard को स्टाइल करने का समय है, जो हमारे HTML दस्तावेज़ के लिए पृष्ठभूमि रंग से शुरू होता है;

 html ऊंचाई: 100%; पृष्ठभूमि-रंग: $ आधार;

vCard

निम्नलिखित शैलियों vCard आवरण को परिभाषित करती हैं। यदि आप पहले LESS के साथ काम कर रहे हैं, तो यह कोड आपको परिचित होगा और पचाने में आसान होगा.

 .vcard चौड़ाई: $ चौड़ाई; मार्जिन: 50 पीएक्स ऑटो; पृष्ठभूमि-रंग: गहरा ($ आधार, 5%); बॉर्डर: 1px ठोस $ अंधेरा; @include बॉर्डर-त्रिज्या (3px); उल पैडिंग: 0; मार्जिन: 0; ली सूची-शैली: कोई नहीं;

आवरण की चौड़ाई से मूल्य विरासत में मिला है $ चौड़ाई चर। पृष्ठभूमि का रंग इससे गहरा होता है 5% बेस कलर से, जबकि बॉर्डर कलर गहरे रंग का होगा 10%. यह रंग सैस रंग कार्यों का उपयोग करके प्राप्त किया जाता है.

VCard भी होगा 3px गोल कोनों की त्रिज्या जो कम्पास CSS3 मिक्सिन का उपयोग करके हासिल की जाती है; बॉर्डर-त्रिज्या (3px).

बायो सेक्शन

जैसा कि हमने इस ट्यूटोरियल में जल्दी नोट किया है, vCard को दो खंडों में विभाजित किया जा सकता है। नीचे दी गई ये नेस्टेड शैलियाँ पहले खंड को परिभाषित करेंगी जिसमें कुछ विवरणों (नाम, ईमेल और फोन) के साथ चित्र प्रोफ़ाइल शामिल है.

 .बायो बॉर्डर-बॉटम: 1 पीएक्स सॉलिड $ डार्क; पैडिंग: $ अंतरिक्ष; @ कस्टम .बॉक्स-साइज़िंग; img @extend .float-left; प्रदर्शन क्षेत्र; सीमा: ($ स्थान / 4) ठोस #ffffff;  .detail @extend .float-left; @ कस्टम .बॉक्स-साइज़िंग; रंग: गहरा ($ आधार, 50%); मार्जिन: बायां: $ अंतरिक्ष; नीचे: $ स्थान / 2;  चौड़ाई: $ चौड़ाई - (($ स्पेस * 3) + $ img); ली &: चौड़ाई से पहले: $ स्थान; ऊंचाई: $ अंतरिक्ष; मार्जिन-राइट: $ स्पेस; फ़ॉन्ट-परिवार: "आधुनिकचित्रण";  & .नाम: पहले सामग्री: "एफ";  & .email: content: "m" से पहले;  & .phone: सामग्री: "एन" से पहले;

ऊपर दिए गए कोड से एक बात है कि हमें लगता है कि आपको एक नोटिस लेने की आवश्यकता है। में चौड़ाई .विस्तार चयनकर्ता इस समीकरण के साथ निर्दिष्ट है $ चौड़ाई - (($ स्पेस * 3) + $ img);.

इस समीकरण का उपयोग विस्तार से गतिशील रूप से गणना करने के लिए किया जाता है चौड़ाई कुल प्रोफ़ाइल चौड़ाई से चित्र प्रोफ़ाइल चौड़ाई और रिक्त स्थान (पैडिंग और मार्जिन) घटाकर.

सामाजिक धारा

नीचे दी गई शैलियाँ vCard में दूसरे खंड के लिए हैं। यहाँ सादे सीएसएस के साथ वास्तव में कोई अंतर नहीं है, केवल अब वे नेस्टेड हैं, और कुछ मूल्यों को चर के साथ परिभाषित किया गया है.

 .सामाजिक पृष्ठभूमि-रंग: $ अंधेरा; चौड़ाई: 100%; पैडिंग: $ अंतरिक्ष; @ कस्टम .बॉक्स-साइज़िंग; उल पाठ-संरेखण: केंद्र; ली प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 32 पीएक्स; ऊंचाई: 32 पीएक्स; पाठ-सजावट: कोई नहीं; प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 100%; ऊंचाई: 100%; पाठ-इंडेंट: 100%; श्वेत-स्थान: Nowrap; छिपा हुआ सैलाब;

इस खंड में, हम छवि स्प्राइट तकनीक का उपयोग करके सोशल मीडिया आइकन प्रदर्शित करेंगे, और कम्पास में उस काम को तेजी से करने की सुविधा है.

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

 @import "सामाजिक / *। png";

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

 @ सभी-सामाजिक-प्रेत को हटा दें;

अंतिम परिणाम

अंत में, सभी कड़ी मेहनत के बाद अब हम इस तरह से परिणाम देख सकते हैं:

मामले में हम सोचते हैं कि 500px बाद में बहुत व्यापक है, हमें केवल मान बदलने की आवश्यकता है $ चौड़ाई चर - उदाहरण के लिए, 350px - बाकी होगा “जादुई” समायोजित करें। आप रंग चर के साथ भी प्रयोग कर सकते हैं.

डेमो देखें
स्रोत डाउनलोड करें

निष्कर्ष

इस ट्यूटोरियल में हमने आपको दिखाया है कि Sass और Compass के साथ एक सरल ऑनलाइन vCard कैसे बनाया जाता है; हालांकि यह सिर्फ एक उदाहरण है। सास और कम्पास वास्तव में शक्तिशाली हैं, लेकिन कभी-कभी यह आवश्यक नहीं है। उदाहरण के लिए, जब हम कुछ पृष्ठों के साथ एक वेबसाइट पर काम कर रहे हैं और शायद केवल शैलियों की कम लाइनों की आवश्यकता होगी, तो Sass और Compass का उपयोग अत्यधिक माना जाता है.

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