कम युक्तियाँ और उपकरणों के साथ प्रभावी ढंग से काम करना

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

ठीक है, अगर तुम तैयार हो, चलो शुरू हो जाओ.

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

1. कोड हाइलाइटर

जैसा कि हमने पहले बताया, हमने आपको ChrunchApp से मिलवाया है। हालाँकि, यह ऐप हर वेब डिज़ाइनर की पसंद नहीं हो सकता है; क्योंकि प्रत्येक डिजाइनर का अपना काम करने का माहौल होता है, जिसमें उनकी पसंद के कोड संपादक भी शामिल होते हैं.

किसी अन्य कोड संपादक को स्थापित करने के बजाय, आप वास्तव में अभी भी अपने वर्तमान का उपयोग कर सकते हैं और इसमें वाक्य रचना हाइलाइटिंग को सक्षम कर सकते हैं। तो, इस पोस्ट में, मैं 2 प्रसिद्ध पाठ संपादकों में प्रकाश डाला कोड जोड़ने के लिए कुछ सुझाव साझा करेंगे: उदात्त पाठ २ तथा नोटपैड++.

उदात्त पाठ २

यह संपादक वर्तमान में कोड बनाने में मेरी मदद करने के लिए मेरा पसंदीदा विकल्प है। यह ऐप विंडोज, लिनक्स और ओएसएक्स के लिए उपलब्ध है, इसलिए आपका ओएस जो भी है, आप अभी भी इस टिप का पालन करने में सक्षम होंगे.

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

ध्यान दें: कृपया सुनिश्चित करें कि आपने डाउनलोड करने से पहले लाइसेंस पढ़ा है, क्योंकि नि: शुल्क संस्करण केवल मूल्यांकन के लिए है.

पैकेज कंसोल स्थापित करें

सबसे पहले, अपना Sublime Text 2 खोलें, और इस मेनू से कंसोल प्रदर्शित करें दृश्य> कंसोल दिखाएं

फिर, कंसोल में निम्नलिखित कमांड लाइन को कॉपी और पेस्ट करें, फिर wBond.net से पैकेज नियंत्रण स्थापित करने के लिए Enter दबाएं:

आयात urllib2, os; pf = "पैकेज नियंत्रण। सार्वजनिक पैकेज"; IPP = sublime.installed_packages_path (); os.makedirs (ipp) नहीं तो os.path.exists (ipp) और कोई नहीं; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); खुला (os.path.join (IPP, पीएफ), 'पश्चिम बंगाल') .write (urllib2.urlopen ( 'http://sublime.wbond.net/'+pf.replace ( ",'% 20 '))। पढ़ें ()); प्रिंट करें 'स्थापना समाप्त करने के लिए उदात्त पाठ को पुनः आरंभ करें'

इस पैकेज कंसोल हाइलाइट-पैकेज को स्थापित करने में हमारी मदद करेगा.

कम-हाइलाइटिंग पैकेज स्थापित करना

उदात्त पाठ 2 को पुनरारंभ करें और इस मेनू से कमांड पैलेट दिखाएं उपकरण> कमांड पैलेट. तब तक प्रतीक्षा करें जब तक कि पैकेज सूची सभी लोड न हो जाए। फिर, टाइप करें पैकेज स्थापित करे पैकेज रिपॉजिटरी को खोजने और लोड करने के लिए.

फिर, रिपॉजिटरी सूची से LESS पैकेज की खोज करें और Enter दबाएं.

निम्न बार स्थिति नोटिफ़िकेशन पर दिखाई देने तक पैकेज को डाउनलोड करने और स्थापित करने के लिए सबलेम टेक्स्ट 2 के लिए एक मिनट प्रतीक्षा करें.

मेनू पर जाएं दृश्य> सिंटैक्स, आपको सूची में LESS देखना चाहिए। इसका मतलब है कि उदात्त पाठ 2 समर्थन कर रहा है .कम से और आपके LESS सिंटैक्स में भी उचित रंग हाइलाइटिंग होना चाहिए.

नोटपैड++

नोटपैड ++ एक फ्री, ओपन सोर्स कोड एडिटर है, और इसकी कार्यक्षमता बढ़ाने के लिए कई उपयोगी प्लगइन्स हैं। यह कई वेब डिज़ाइनरों / डेवलपर्स द्वारा व्यापक रूप से उपयोग किया जाता है जो विशेष रूप से विंडोज ऑपरेटिंग सिस्टम के साथ काम करते हैं। इसलिए, मैं यह भी तय करता हूं कि इसके लिए LESS पाठ हाइलाइटिंग जोड़ने के लिए टिप भी शामिल करें.

नोटपैड में लेस-हाइलाइट स्थापित करें++

नोटपैड ++ में लेस कलर हाइलाइट को इनेबल करना काफी आसान है.

इस लिंक (userDefineLang_LESS.xml) से नोटपैड ++ के लिए सबसे पहले LESS पैकेज डाउनलोड करें। फिर जाएं देखें> उपयोगकर्ता-परिभाषित संवाद.

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

अपनी .less फ़ाइल खोलें और भाषा मेनू पर जाएँ। अब आपको LESS शामिल होना चाहिए। अपने LESS सिंटैक्स पर रंग हाइलाइटिंग लागू करने के लिए इसका चयन करें.

और अधिक संसाधनों

बाजार में कई अन्य संपादक हैं। इसलिए, यहां हम आपके लिए कुछ उपयोगी लिंक शामिल करते हैं यदि आप उपरोक्त संपादकों में से किसी का उपयोग नहीं करते हैं.

Adobe DreamWeaver

निस्संदेह, ड्रीमविवर का एक विशाल उपयोगकर्ता-आधार है। यह मैक और विंडोज दोनों के लिए उपलब्ध है। इसलिए, यदि आप इस संपादक का उपयोग करते हैं, तो Adobe DreamWeaver में LESS हाइलाइट स्थापित करने के लिए एक अच्छा स्रोत है.

कोडा

यदि आप मैक का उपयोग कर रहे हैं, तो आप शायद कोडा को जानते हैं, यह संपादक मैक उपयोगकर्ताओं में सबसे लोकप्रिय में से एक है। और, यहां बताया गया है कि आप कोडा में LESS कैसे स्थापित कर सकते हैं.

Geany

यह लिनक्स उपयोगकर्ताओं के बीच अधिक लोकप्रिय कोड संपादकों में से एक है। मेरे कार्यालय के कुछ कंप्यूटर जो लिनक्स पर चलते हैं, वे भी Geany का उपयोग करते हैं। इसलिए, यदि आप इसका उपयोग करते हैं, तो आप SuperUser.com पर इस निर्देश का पालन करके LESS हाइलाइट को शामिल कर सकते हैं

2. कम संकलक

एक अंतर्निहित LESS संकलक वाले ChrunchApp के विपरीत, अन्य संपादकों में डिफ़ॉल्ट रूप से यह नहीं होगा। हालाँकि इसे शामिल करने के कुछ तरीके हैं, लेकिन यह सामान्य उपयोगकर्ताओं के लिए तकनीकी है। तो मुझे जो सबसे अच्छा समाधान मिला है वह है निम्नलिखित उपकरणों का उपयोग करके संकलन करना: winless या LESS.app. WinLESS विंडोज के लिए डिज़ाइन किया गया कंपाइलर है, जबकि LESS.app OSX के लिए बनाया गया है.

ये उपकरण हमारे LESS कोड को एक स्थिर सीएसएस में स्वचालित रूप से परिवर्तित कर सकते हैं क्योंकि हम फ़ाइल को सहेजते हैं और कोड में कोई त्रुटि होने पर सीधे रिपोर्ट करते हैं। खैर, मैं आपको दिखाता हूँ कि यह उपकरण कितना उपयोगी है:

सबसे पहले, मैं WinLESS डाउनलोड करना और इसे स्थापित करना चाहूंगा.

फ़ोल्डर जोड़ें बटन पर क्लिक करें और उस निर्देशिका का पता लगाएं जहाँ आप अपना नाम रखते हैं .कम से फ़ाइलें (मुझे लगता है कि आप पहले से ही कम से कम एक बनाया है)। एक बार जब आप एक जोड़ते हैं; WinLESS स्कैन और सभी मिल जाएगा .कम से फ़ाइलें और सूची में आपको दिखाते हैं.

मेनू पर जाएं फ़ाइल> सेटिंग, और सुनिश्चित करें कि इन विकल्पों की जाँच की जाती है;

• सहेजे जाने पर स्वचालित रूप से फ़ाइलों को संकलित करें
• सफल संकलन पर संदेश दिखाएं

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

अपने खुले .कम से जोड़ा निर्देशिका से फ़ाइल, कुछ परिवर्तन करें और इसे सहेजें.

जब फ़ाइल को सफलतापूर्वक संकलित किया गया है, तो WinLESS आपको सूचित करेगा .सीएसएस या यदि कोड में कोई त्रुटि है। इस तरह से आप सीधे .css आउटपुट की जांच कर सकते हैं, बजाय इसके संकलन के पूरा होने के लिए कोड का इंतजार करने के.

यदि आप मैक का उपयोग कर रहे हैं, तो आप LESS.app का उपयोग कर सकते हैं जिसमें WinLESS के समान कार्यशीलता है.

प्रीसेट मिश्रण

वर्तमान आधुनिक वेब डिज़ाइन प्रथाओं में, हम CSS3 गुणों जैसे ग्रेडिएंट, शैडो या बॉर्डर रेडियस का उपयोग करेंगे जो इस तरह दिखते हैं:

-वेबकिट-बॉर्डर-त्रिज्या: 3 पीएक्स; -मोज़-बॉर्डर-रेडियस: 3 पीएक्स; सीमा-त्रिज्या: 3 पीएक्स;

या

पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # f0f9ff 0%, # a1dbff 100%); पृष्ठभूमि: -webkit- रैखिक-ढाल (शीर्ष, # f0f9ff 0%, # a1dbff 100%); बैकग्राउंड: -ओ-लीनियर-ग्रेडिएंट (टॉप, # f0f9ff 0%, # a1dbff 100%); पृष्ठभूमि: -ms-रैखिक-ढाल (शीर्ष, # f0f9ff 0%, # 1dbff 100%); पृष्ठभूमि: रैखिक-ढाल (शीर्ष, # f0f9ff 0%, # a1dbff 100%);

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

और, मेरे पसंदीदा में से एक कम तत्व है जिसमें कई उपयोगी CSS3 प्रीसेट नियम हैं। इस प्रकार, अब हम थकाऊ विक्रेता उपसर्गों से कोड की कम पंक्तियाँ लिखते हैं.

सब ठीक है, अब देखते हैं कि ऊपर दिए गए ये सभी उपाय वास्तव में कैसे मदद कर सकते हैं.

सभी को एक साथ रखकर

इस उदाहरण में मैं एक साधारण लिंक बटन बनाने जा रहा हूँ। पहले मैं एक नया HTML डॉक्यूमेंट बनाना चाहूँगा और निम्नलिखित मार्क-अप डालूँगा:

     मुझे क्लिक करें 

बनाओ styles.less हमारी मुख्य LESS स्टाइलशीट के रूप में, इसे हमारे HTML दस्तावेज़ के साथ उसी फ़ोल्डर में सहेजें और फ़ोल्डर को WinLESS में जोड़ें.

आयात करें elements.less हमने इस सिंटैक्स का उपयोग करने से पहले डाउनलोड किया है:

@import "elements.less";

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

इसके बाद, अपनी स्टाइलशीट में LESS नियम नीचे रखें। और, इसे एक बार फिर से सहेजें

 एक प्रदर्शन: इनलाइन-ब्लॉक; गद्दी: 10px 20px; रंग: # 555; पाठ-सजावट: कोई नहीं; .bw-gradient (#eee, 240, 255); .rounded; .bordered; &: hover .bw-gradient (#eee, 255, 240);  

चूँकि हमारी .कम से WinLESS में फ़ाइल जोड़ी गई है, यह स्वचालित रूप से संकलित की जाएगी .सीएसएस. अब परिणाम देखते हैं.

ठीक है, यह इतना बुरा नहीं है, यह देखते हुए कि इस बटन को जरूरत से कम लाइनों के साथ बनाया गया था। और, यहाँ वास्तविक उत्पन्न स्थिर सीएसएस है:

 एक प्रदर्शन: इनलाइन-ब्लॉक; गद्दी: 10px 20px; रंग: # 555; पाठ-सजावट: कोई नहीं; पृष्ठभूमि: #eeeeee; पृष्ठभूमि: -webkit- ग्रेडिएंट (रैखिक, बाएं नीचे, बाएं ऊपर, रंग-स्टॉप (0, # f0f0f0), रंग-स्टॉप (1, #ffffff)); पृष्ठभूमि: -ms-रैखिक-ढाल (नीचे, # f0f0f0 0%, # f0f0f0 100%); पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (केंद्र तल, # f0f0f0 0%, #ffffff 100%); -वेबकिट-बॉर्डर-त्रिज्या: 2 पीएक्स; -मोज़-बॉर्डर-रेडियस: 2 पीएक्स; सीमा-त्रिज्या: 2 पीएक्स; -मोज़-बैकग्राउंड-क्लिप: पैडिंग; -webkit- पृष्ठभूमि-क्लिप: गद्दी-बॉक्स; पृष्ठभूमि-क्लिप: पैडिंग-बॉक्स; सीमा-शीर्ष: ठोस 1px #eeeeee; सीमा-वाम: ठोस 1px #eeeeee; बॉर्डर-राइट: सॉलिड 1px #eeeeee; बॉर्डर-बॉटम: सॉलिड 1px #eeeeee;  a: hover बैकग्राउंड: #eeeeee; पृष्ठभूमि: -बेटक-ग्रेडिएंट (रैखिक, बाएं नीचे, बाएं ऊपर, रंग-रोकें (0, #ffffff), रंग-बंद (1, # f0f0f0)); पृष्ठभूमि: -ms-रैखिक-ढाल (नीचे, #ffffff 0%, #ffffff 100%); पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (केंद्र तल, #ffffff 0%, # f0f0f0 100%); 

संक्षेप में

इस पोस्ट में हमने जो चर्चा की है उसका एक संक्षिप्त सारांश इस प्रकार है:

• हमारे वर्तमान संपादक में सिंटैक्स हाइलाइट को सक्षम करके, हमें केवल कम सिंटैक्स की रचना के लिए एक अतिरिक्त संपादक स्थापित करने की आवश्यकता नहीं है; यह आपकी डिस्क पर आपको कुछ स्थान / मेमोरी बचा सकता है.
• हमें अपने HTML हेड सेक्शन में LESS.js लाइब्रेरी को डाउनलोड करने और लिंक करने की भी आवश्यकता नहीं है जैसा कि हमने अपने अंतिम ट्यूटोरियल में किया था। इस तरह, हमारा HTML डॉक्यूमेंट साफ और स्वच्छ रहता है.
• WinLESS और LESS.app जैसे कंपाइलर टूल का उपयोग करके स्टेटिक CSS आउटपुट तुरंत उत्पन्न किया जा सकता है। इसलिए, अगर सिंटैक्स में कुछ गड़बड़ है, तो हम तुरंत जांच कर सकते हैं.
• एलईएस एलिमेंट्स जैसे प्रीसेट मिक्सिंस हमारे सबसे अच्छे दोस्त हैं। थकाऊ CSS3 संपत्ति का संकलन करते समय यह वास्तव में हमारे समय को बचा सकता है.

.