Synassactically बहुत बढ़िया Stylesheets Sass में कम्पास का उपयोग करना

अपनी पिछली पोस्ट में, हमने कम्पास के बारे में एक बार उल्लेख किया है। आधिकारिक साइट के अनुसार, यह वर्णित है एक ओपन-सोर्स सीएसएस ऑथरिंग फ्रेमवर्क.

संक्षेप में, Compass एक Sass एक्सटेंशन है और, LESS के LESS तत्व की तरह, इसमें CSS3 मिक्सिंस का उपयोग करने के लिए रेडी-टू-यूज़ का एक गुच्छा है, इसके अलावा इसमें कई अन्य सामान भी जोड़े गए हैं जो इसे Sass का अधिक शक्तिशाली साथी उपकरण बनाते हैं। चलो पता करते हैं.

कम्पास स्थापित करना

कम्पास, सैस की तरह, हमारे सिस्टम में स्थापित करने की आवश्यकता है. लेकिन, यदि आप स्काउट ऐप या कम्पास.ऐप जैसे एप्लिकेशन का उपयोग कर रहे हैं, तो यह आवश्यक नहीं होगा.

उनके बिना, आपको इसे करने की आवश्यकता है “मैन्युअल रूप से” के माध्यम से टर्मिनल / कमांड प्रॉम्प्ट. ऐसा करने के लिए, निम्न कमांड लाइन टाइप करें;

मैक / लिनक्स टर्मिनल पर

 सूद मणि स्थापित कम्पास 

विंडोज कमांड प्रॉम्प्ट पर

 मणि स्थापित कम्पास 

यदि स्थापना सफल हो जाती है, तो आपको एक अधिसूचना प्राप्त करनी चाहिए जैसा कि नीचे दिखाया गया है;

फिर, जोड़ने के लिए अपनी कार्य निर्देशिका में निम्न कमांड लाइन चलाएँ कम्पास परियोजना की फाइलें.

 कम्पास init 

आगे की पढाई: कम्पास कमांड लाइन प्रलेखन

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

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

 http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" 

कंपास द्वारा बनाई गई टिप्पणी लाइन को पट्टी करें; हम ने ठीक किया सच अगर हमें टिप्पणियों को मुद्रित करने की आवश्यकता है या असत्य अगर यह नहीं है.

 line_comments = झूठी 

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

 output_style =: विस्तारित 

मुझे लगता है कि ये कॉन्फ़िगरेशन सामान्य रूप से अधिकांश परियोजनाओं के लिए पर्याप्त होगा, लेकिन यदि आप इन प्राथमिकताओं की आवश्यकता है, तो आप हमेशा इस प्रलेखन, कम्पास कॉन्फ़िगरेशन संदर्भ का उल्लेख कर सकते हैं.

अंत में, हमें करने की आवश्यकता है घड़ी इस कमांड लाइन के साथ निर्देशिका में हर फाइल;

 कम्पास घड़ी 

यह कमांड लाइन, जैसा कि सैस में है, हर फाइल में बदलाव को देखेगी, और संबंधित सीएसएस फाइलों को बनाएगी या अपडेट करेगी। लेकिन याद रखें, प्रोजेक्ट को कॉन्फ़िगर करने के बाद इस लाइन को चलाएं config.rb, या फिर यह सिर्फ फाइल में बदलाव को नजरअंदाज करेगा.

CSS3 मिश्रण

CSS3 के माध्यम से चलने से पहले, हमारे प्राथमिक में .एससीएसएस फ़ाइल, हमें निम्नलिखित लाइन के साथ कम्पास को आयात करने की आवश्यकता है @import "कम्पास";, यह कम्पास में सभी एक्सटेंशन आयात करेगा। लेकिन, अगर हमें केवल CSS3 की आवश्यकता है तो हम इसे विशेष रूप से इस लाइन के साथ भी कर सकते हैं @import "कम्पास / css3".

आगे की पढाई: कम्पास CSS3.

अब, चलो सास और कम्पास के साथ कुछ बनाना शुरू करते हैं। HTML दस्तावेज़ में, यह मानते हुए कि आपने भी एक बनाया है, हम निम्नलिखित सरल मार्कअप डालेंगे:

विचार भी सरल है; हम गोल कोनों के साथ एक घुमाए हुए बॉक्स बनाएंगे, और नीचे स्टार्टर के लिए हमारे सैस नेस्टेड स्टाइल हैं;

 body पृष्ठभूमि-रंग: # f3f3f3;  अनुभाग चौड़ाई: 500 पीएक्स; मार्जिन: 50 पीएक्स ऑटो 0; div चौड़ाई: 250px; ऊंचाई: 250 पीएक्स; पृष्ठभूमि-रंग: #ccc; मार्जिन: 0 ऑटो;  

और, हमारी आयत को गोल कोनों को प्राप्त करने के लिए, हम निम्नानुसार कम्पास CSS3 मिक्सिन शामिल कर सकते हैं;

 body पृष्ठभूमि-रंग: # f3f3f3;  अनुभाग चौड़ाई: 500 पीएक्स; मार्जिन: 50 पीएक्स ऑटो 0; div चौड़ाई: 250px; ऊंचाई: 250 पीएक्स; पृष्ठभूमि-रंग: #ccc; मार्जिन: 0 ऑटो; @ सीमा-त्रिज्या को हटा दें;  

इस बॉर्डर-त्रिज्या मिश्रण सभी ब्राउज़र उपसर्गों को उत्पन्न करेगा और, डिफ़ॉल्ट रूप से, कोने का त्रिज्या होगा 5px. लेकिन, हम इस तरह से अपनी जरूरत के लिए त्रिज्या भी निर्दिष्ट कर सकते हैं @include बॉर्डर-त्रिज्या (10px); .

 खंड div चौड़ाई: 250px; ऊंचाई: 250 पीएक्स; पृष्ठभूमि-रंग: #ccc; मार्जिन: 0 ऑटो; -वेबकिट-बॉर्डर-त्रिज्या: 10 पीएक्स; -मोज़-बॉर्डर-रेडियस: 10 पीएक्स; -एमएस-बॉर्डर-त्रिज्या: 10 पीएक्स; -ओ-बॉर्डर-त्रिज्या: 10 पीएक्स; सीमा-त्रिज्या: 10 पीएक्स;  

अगला, योजना के रूप में हम बॉक्स को भी घुमाएंगे। कम्पास के साथ इसे करना वास्तव में आसान है, हमें बस इतना करने की आवश्यकता है कि परिवर्तन विधि को कॉल करें;

 body पृष्ठभूमि-रंग: # f3f3f3;  अनुभाग चौड़ाई: 500 पीएक्स; मार्जिन: 50 पीएक्स ऑटो 0; div चौड़ाई: 250px; ऊंचाई: 250 पीएक्स; पृष्ठभूमि-रंग: #ccc; मार्जिन: 0 ऑटो; @include बॉर्डर-त्रिज्या (10px); @ फिर घुमाना;  

यह मिक्सिन उन थकाऊ विक्रेता उपसर्गों को भी उत्पन्न करेगा और रोटेशन डिफ़ॉल्ट रूप से 45 डिग्री लेगा। नीचे दिए गए CSS को देखें.

 खंड div चौड़ाई: 250px; ऊंचाई: 250 पीएक्स; पृष्ठभूमि-रंग: #ccc; मार्जिन: 0 ऑटो; -वेबकिट-बॉर्डर-त्रिज्या: 10 पीएक्स; -मोज़-बॉर्डर-रेडियस: 10 पीएक्स; -एमएस-बॉर्डर-त्रिज्या: 10 पीएक्स; -ओ-बॉर्डर-त्रिज्या: 10 पीएक्स; सीमा-त्रिज्या: 10 पीएक्स; -वेबकैट-ट्रांसफॉर्म: रोटेट (45 डीजी); -मोज़-ट्रांसफ़ॉर्म: रोटेट (45 डिग्री); -ms-transform: रोटेट (45deg); -ओ-परिवर्तन: घुमाव (45 डिग्री); परिवर्तन: घुमाएँ (45 डिग्री);  

कम्पास सहायक

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

@ फ़ॉन्ट-फ़ेस फ़ाइलों को जोड़ना

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

 @ फ़ॉन्ट-चेहरा फ़ॉन्ट-परिवार: "MyFont"; src: url ('/ फ़ॉन्ट्स / font.ttf') प्रारूप ('truetype'), url ('/ फ़ॉन्ट्स / font.otf') प्रारूप ('opentype'), url ('/ फ़ॉन्ट्स / font.woff') प्रारूप ('woff'), url ('/ font / font.eot') प्रारूप ('एम्बेडेड-ऑपेंटाइप');  

कम्पास के साथ हम इसके साथ और अधिक आसानी से कर सकते हैं font-फ़ाइलें () सहायकों;

 @include फॉन्ट-फेस ("MyFont", फॉन्ट-फाइल्स ("font.ttf", "font.otf", "font.woff", "font.eot")); 

उपरोक्त कोड एक परिणाम उत्पन्न करेगा जो पहले कोड स्निपेट के समान है, यह स्वचालित रूप से फ़ॉन्ट प्रकार का पता लगाएगा और इसे इसमें जोड़ देगा प्रारूप () वाक्य - विन्यास.

हालाँकि, यदि हम कोड को बारीकी से देखें, तो आप देखेंगे कि हमने फ़ॉन्ट पथ नहीं जोड़ा है (/फोंट्स/)। तो, कम्पास को कैसे पता चला कि फोंट कहाँ स्थित हैं? ठीक है, भ्रमित मत हो, यह रास्ता वास्तव में है config.rb साथ में fonts_path संपत्ति;

 font_dir = "फोंट" 

तो, हम कहते हैं कि हम इसे बदलते हैं font_dir = "myfonts", फिर उत्पन्न कोड होगा यूआरएल ( '/ myfonts / font.ttf'). डिफ़ॉल्ट रूप से, जब हम पथ निर्दिष्ट नहीं कर रहे हैं, तो Compass इसे निर्देशित करेगा स्टाइलशीट / फोंट.

छवि जोड़ना

एक और उदाहरण बनाते हैं, इस बार हम एक छवि जोड़ेंगे। CSS के माध्यम से चित्र जोड़ना एक सामान्य बात है। हम आम तौर पर इसका उपयोग करके करते हैं पृष्ठभूमि छवि संपत्ति, जैसे;

 div पृष्ठभूमि-छवि: url ('/ img / the-image.png');  

कम्पास में, का उपयोग करने के बजाय यूआरएल () फ़ंक्शन, हम इसे से बदल सकते हैं छवि यूआरएल() सहायक और जोड़ने के समान @फॉन्ट फ़ेस ऊपर, हम पथ को पूरी तरह से अनदेखा कर सकते हैं और कम्पास को बाकी को संभालने दे सकते हैं.

यह कोड पहले स्निपेट की तरह ही सटीक सीएसएस घोषणा भी उत्पन्न करेगा.

 div बैकग्राउंड-इमेज: image-url (in-image.png);  

इसके अलावा, कम्पास में इमेज डायमेंशन हेल्पर्स भी हैं, यह मुख्य रूप से इमेज की चौड़ाई और ऊँचाई का पता लगाता है, इसलिए यदि हम दोनों को सीएसएस में निर्दिष्ट करने की आवश्यकता है, तो हम दो और लाइनें जोड़ सकते हैं, जो निम्नानुसार हैं;

 div पृष्ठभूमि-चित्र: image-url ("images.png"); चौड़ाई: छवि-चौड़ाई ("images.png"); ऊँचाई: छवि-ऊँचाई ("images.png");  

आउटपुट कुछ इस तरह बन जाएगा;

 div पृष्ठभूमि-छवि: url ('/ img / images.png; 1344774650'); चौड़ाई: 80 पीएक्स; ऊंचाई: 80 पीएक्स;  

आगे की पढाई: कम्पास हेल्पर कार्य

फाइनल थॉट

ठीक है, हमने आज कम्पास के बारे में काफी चर्चा की है और जैसा कि आप देख सकते हैं कि यह वास्तव में एक शक्तिशाली उपकरण है और हमें सीएसएस को और अधिक तरीके से लिखना चाहिए।.

और, जैसा कि आप पहले से ही जानते हैं, सास एकमात्र नहीं है सीएसएस प्रीप्रोसेसर; LESS भी है जिसके बारे में हमने पहले चर्चा की है। अगली पोस्ट में, हम हेड-टू-हेड की तुलना करने की कोशिश करेंगे, जो इन दोनों में से एक प्रीप्रोसेसरी सीएसएस में बेहतर काम करता है.

• स्रोत डाउनलोड करें