कम सीएसएस ट्यूटोरियल डिजाइन एक चालाक मेनू नेविगेशन बार
वेब डिजाइन और विकास की दुनिया वास्तव में तेजी से विकसित हो रही है। हम इसे समुदाय में लॉन्च किए गए नए सामानों की बड़ी संख्या में देख सकते हैं (लगभग) हर रोज, यह ऐप या नए फ्रेमवर्क हैं जो वेब डिजाइनर या डेवलपर्स के रूप में हमारे दिन-प्रतिदिन के काम को और अधिक प्रभावी और कुशल बनाने में मदद करते हैं।.
एक जिसने आज वेब डिज़ाइन के विकास से मेरा ध्यान आकर्षित किया है, वह है LESS, एक प्रोग्राम करने योग्य स्टाइलशीट लैंग्वेज, जो वैरीएबल्स, मिक्सिंस, फंक्शन्स और ऑपरेशंस जैसी कुछ प्रोग्रामिंग अवधारणाओं को जोड़कर सीएसएस सिंटैक्स लिखने के तरीके को बढ़ाती है।.
यह CSS सिंटैक्स लिखने में नई क्षमताएं खोलता है। उदाहरण के लिए, सीएसएस में मिक्सिन को लागू करने के तरीके से जैसे हम एक कार्यक्रम में करते हैं, अब हम डिफ़ॉल्ट शैलियों और मूल्यों को संग्रहीत कर सकते हैं जो कि जब भी संभव हो पूरी फ़ाइल में लागू किया जा सकता है। इसके साथ, हमें एक ही शैली को बार-बार लिखने की आवश्यकता नहीं होगी.
ठीक है, चलो यह क्या पेशकश की है में बेहतर अंतर्दृष्टि प्राप्त करने के लिए कम से कम कुछ अभ्यास करते हैं.
लेस के साथ डिजाइनिंग
इस ट्यूटोरियल में हम एक स्लिक मेनू नेविगेशन बार डिजाइन करने का प्रयास करेंगे जो Apple.com में एक से प्रेरित है। चूंकि यह मूल उत्पाद से केवल 'प्रेरित' है, इसलिए ध्यान दें कि हमारा अंतिम ट्यूटोरियल उत्पाद मूल के समान ठीक नहीं होगा.
आरंभ करने के लिए, आप पहले उपयोगी संसाधनों को पढ़ना चाहेंगे। वे LESS भाषा के कुछ बुनियादी कार्यान्वयन की व्याख्या करते हैं, जो इस ट्यूटोरियल में आगे खुदाई करने से पहले आपके लिए उपयोगी होगा.
- कम अधिक है: लेस के साथ अपने सीएसएस कोडिंग को आसान बनाएं
- कम के साथ बेहतर सीएसएस लिखें
- एक परिचय कम करने के लिए, और तुलना की तुलना करें
तैयारी
सबसे पहले, इस छोटे से प्रोजेक्ट के लिए कुछ आवश्यक चीजें हैं, जो हैं:
1. कम पाठ संपादक
नेविगेशन मेनू को कोड करने के लिए हमें एक टेक्स्ट एडिटर की आवश्यकता होगी। हालाँकि, आज बाजार में उपलब्ध अधिकांश टेक्स्ट संपादकों (जैसे कि ड्रीमवेवर, नोटपैड ++, इनटाइप, सबलेम टेक्स्ट 2) का समर्थन करना अभी बाकी है .कम से फ़ाइल एक्सटेंशन डिफ़ॉल्ट रूप से, इसलिए सिंटैक्स को अच्छी तरह से हाइलाइट नहीं किया जा सकता है.
इसलिए, इस ट्यूटोरियल के उद्देश्य के लिए, हम ChrunchApp नाम के LESS के लिए एक विशेष टेक्स्ट एडिटर का उपयोग करेंगे। हम खोल सकते हैं और संपादित कर सकते हैं .कम से एक्सटेंशन फाइलें और इस एप्लिकेशन का उपयोग करके इसे स्थिर सीएसएस में संकलित करें। चूंकि यह एक एडोब एयर एप्लीकेशन है, इसे हर प्रमुख डेस्कटॉप ओएस (विन, ओएसएक्स और लिनक्स) में स्थापित किया जा सकता है।.
HTML संपादक के लिए आप किसी भी संपादक का उपयोग कर सकते हैं जो आप पहले से ही अब उपयोग कर रहे हैं। मुझे व्यक्तिगत रूप से उदात्त पाठ 2 पसंद है.
2. कम .js
अगला, अपनी आधिकारिक वेबसाइट से लेस जावास्क्रिप्ट लाइब्रेरी डाउनलोड करें, वर्तमान संस्करण 1.2.1 है। इसके लिए इसे अपने अभ्यास फ़ोल्डर के अंदर रखें.
फिर फ़ाइल को HTML दस्तावेज़ से लिंक करें.
3. उपसर्ग-मुक्त
हम नेविगेशन मेनू में कुछ प्रभावों को पूरा करने के लिए कुछ CSS3 सुविधाओं का भी उपयोग करेंगे जिसमें विक्रेता उपसर्ग शामिल होंगे (-moz-, -ओ-, -वेबकिट-) इसके लिए विभिन्न ब्राउज़रों में सही ढंग से प्रस्तुत करना। हालाँकि, मैं व्यक्तिगत रूप से उपसर्गों का उपयोग करने का पक्ष नहीं लेता हूं क्योंकि यह सीएसएस फ़ाइल को ब्लोट करेगा.
इस कारण से, मैंने उप-मुक्त का उपयोग करने का निर्णय लिया, ली वेरो द्वारा बनाई गई एक जावास्क्रिप्ट लाइब्रेरी जो पृष्ठभूमि में स्वचालित रूप से विक्रेता उपसर्गों को संभाल लेगी। इसलिए हमें केवल W3C से आधिकारिक सिंटैक्स लिखना होगा.
फ़ाइल डाउनलोड करें और इसे HTML फ़ाइल से लिंक करें.
ठीक है, हम सब सेट हैं; अब HTML मार्कअप को संरचित करना शुरू करते हैं.
HTML मार्कअप
नेविगेशन काफी सरल है। यह एक अनियंत्रित सूची टैग के अंदर लिपटे पांच मेनू होगा। अपना पसंदीदा HTML संपादक खोलें और निम्नलिखित मार्कअप डालें:
लेस स्टाइल
इस खंड में हम LESS भाषा के साथ नेविगेशन को स्टाइल करना शुरू करेंगे। जो लोग प्रोग्रामिंग जैसी भाषा के लिए नए हैं, उनके लिए सीएसएस सिंटैक्स को LESS के साथ लिखना थोड़ा अजीब और अजीब लगेगा। लेकिन चिंता न करें, एक बार जब आप कुछ अभ्यास करते हैं, तो यह निश्चित रूप से शुद्ध सीएसएस लिखने के तरीके की तुलना में अधिक सुखद होगा (यह मेरा अनुभव है, यह थोड़ा व्यसनी भी है).
आइए हमारे प्रेरणा स्रोत से नेविगेशन शैली की जांच करें.
जैसा कि हम ऊपर स्क्रीनशॉट में देख सकते हैं, Apple.com नेविगेशन में निम्नलिखित 6 मुख्य सामान्य शैलियाँ हैं:
- साया
- सीमा
- विभक्त
- ढ़ाल
- होवर प्रभाव
- टेक्स्ट
हम इन शैलियों को संग्रहीत करेंगे और उन्हें अंदर सहेजेंगे config.less डिफ़ॉल्ट शैली के रूप में विन्यास; कुछ डिज़ाइनर इसका नाम भी दे सकते हैं lib.css वह खड़ा है पुस्तकालय. इस फ़ाइल को हमारे दस्तावेज़ से लिंक करें.
सुनिश्चित करें कि आप इसे LESS जावास्क्रिप्ट लाइब्रेरी से पहले रखें.
चर के साथ रंग का आधार परिभाषित करें
इस चरण में हम वैरिएबल का उपयोग करके नेविगेशन रंग आधार को परिभाषित करेंगे। LESS के चर को प्रयोग करके घोषित किया गया है @ प्रतीक.
@ तेम: # 555;
इस @theme चर हमारे मानक रंग है; हम हर तरह से इसका इस्तेमाल सही रंग योजना को पूंछने के लिए करेंगे और ताकि रंग संरचना अधिक सुसंगत बनने की उम्मीद होगी.
मिक्स के साथ डिफॉल्ट शैडो स्टाइल को परिभाषित करें
LESS से मुझे जो सुविधाएँ पसंद हैं उनमें से एक है मिक्सिन्स। यह एक प्रोग्रामिंग अवधारणा है जो कई पूर्वनिर्धारित शैलियों को संग्रहीत करता है जो कि LESS को कक्षाओं में या बाद में स्टाइलशीट में विरासत में प्राप्त किया जा सकता है।.
.छाया बॉक्स-छाया: 0 1px 2px 0 @theme;
ऊपर दिए गए कोड में मैंने उपसर्ग का संस्करण शामिल नहीं किया है डब्बे की छाया संपत्ति, उपसर्ग-मुक्त पुस्तकालय के बाद से उन्हें स्वचालित रूप से संभाल लेंगे। इसके अलावा, छाया रंग विषय चर रंग से विरासत में मिला है.
पैरामीट्रिक मिश्रणों के साथ सीमा शैली को परिभाषित करें
नेविगेशन बार को थोड़ा गोल कोने के साथ एक अलग सीमा रंग की आवश्यकता होगी। हम पैरामीट्रिक मिश्रणों का उपयोग करके सीमा शैली को संकलित कर सकते हैं। यह वास्तव में मिक्सिन्स के समान कार्यक्षमता है, केवल अंतर यह है कि इसमें परिवर्तनशील पैरामीटर भी हैं इसलिए मान अधिक समायोज्य हैं.
.बॉर्डर (@radius: 3px) बॉर्डर-रेडियस: @radius; बॉर्डर: 1 पीएक्स सॉलिड @theme - # 050505;
उपरोक्त कोड में, हम डिफ़ॉल्ट सीमा निर्धारित करते हैं @radius के लिये 3px और जैसा कि हमने पहले बताया, इस मूल्य को बाद में बदला जा सकता है.
ऑपरेशन के साथ ग्रेडिएंट, डिवाइडर और होवर स्टाइल को परिभाषित करें
ऑपरेशन केवल एक प्रोग्रामिंग भाषा है जहां हम एक वांछित परिणाम प्राप्त करने के लिए जोड़, विभाजन, घटाव और गुणा जैसे गणित के फार्मूले को लागू कर सकते हैं। आइए निम्नलिखित कोड पर एक नज़र डालें:
.विभक्त सीमा-शैली: ठोस; सीमा-चौड़ाई: 0 1px 0 1px; बॉर्डर-रंग: पारदर्शी @theme - # 111 पारदर्शी @theme + # 333;
ऊपर के कोड में हम घटाते हैं @theme द्वारा परिवर्तनशील # 111, इस तरह से बाएं बॉर्डर का कलर आउटपुट थोड़ा गहरा होगा। जबकि सही सीमा का रंग इसके अलावा से लिया गया है @theme चर हेक्स रंग के साथ # 333, उत्पादन हल्का होगा.
रंग योजना स्तर
ठीक है, आप में से कुछ के लिए जो सूत्रों से भ्रमित हो सकते हैं, आइए बेहतर समझ पाने के लिए नीचे दिए गए रंग योजना आरेख की जांच करें:
अधिकतम डार्क टोन है # 000 (काला) है, जबकि अधिकतम प्रकाश स्वर है #fff (सफेद) और हमारा वर्तमान रंग आधार है # 555. तो, अगर हम चाहते हैं कि रंग आधार हो 3 वर्तमान से गहरे स्तर, हम बस इसे घटा सकते हैं # 333. इसी तरह से रंग हल्का करने के लिए भी लगाया जा सकता है.
अगला, हम ढाल रंग का संचालन करेंगे.
.gradient बैकग्राउंड: लीनियर-ग्रेडिएंट (शीर्ष, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 15155 100%); .हॉवरफेक्ट पृष्ठभूमि: लीनियर-ग्रेडिएंट (शीर्ष, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme # # 050505 100%);
गार्ड मिक्स के साथ टेक्स्ट स्टाइल को परिभाषित करें
हमारे पास नेविगेशन बार पर 2 रंग हैं, एक गहरे रंग और एक प्रकाश है। हम गार्ड मिक्स का उपयोग करके पाठ के लिए दो सशर्त बयान लागू करते हैं.
सबसे पहले, जब पाठ को एक रंग दिया जाता है जिसमें हल्कापन 50% या उससे अधिक के बराबर होता है, तो पाठ की छाया इस मामले में रंग बदल जाना चाहिए # 000000.
.textcolor (@txtcolor) जब (लपट (@txtcolor)> = 50%) color: @txtcolor; पाठ-छाया: 1px 1px 0px # 000000;
फिर, जब पाठ को एक रंग दिया जाता है, तो लपट 50% से कम होती है पाठ की छाया सफेद हो जाएगा.
.textcolor (@txtcolor) जब (लपट (@txtcolor)आयात करना
चलिए अब दूसरा बनाते हैं
.कम सेफ़ाइल नामstyles.lessऔर आयात करेंconfig.lessइसे में:@import "config.less";फ़ॉन्ट परिवार जोड़ें
नेविगेशन बार को अधिक आकर्षक दिखने के लिए, हम एक नए फ़ॉन्ट परिवार का उपयोग करते हुए शामिल करेंगे
@फॉन्ट फ़ेसराज करते हैं। हैरानी की बात है,@फॉन्ट फ़ेसनियम वास्तव में IE6 के बाद से पहले से ही समर्थित है!इस बार हम Asap फ़ॉन्ट का उपयोग करेंगे। इसे फॉन्ट गिलहरी के फॉन्ट फेस कलेक्शन से डाउनलोड करें। फिर हमारी हाल ही में बनाई गई शैलियों को सम्मिलित करें
styles.lessफ़ाइल.@ फ़ॉन्ट-चेहरा फ़ॉन्ट-परिवार: 'असैपरेगुलर'; src: यूआरएल ( 'फोंट / Asap-रेगुलर-webfont.eot'); src: url ('फ़ॉन्ट्स / Asap-Regular-webfont.eot? #iefix') प्रारूप ('एम्बेडेड- opentype'), url ('फ़ॉन्ट / Asap-Regular-webfont.woff') प्रारूप ('woff'), url ('फोंट / असैप-रेग्युलर-वेबफॉन्ट.फट') फॉर्मेट ('ट्रेटाइप'), यूआरएल ('फोंट / असैप-रेगुलर-वेबफॉन्ट.सर्व # असैप्रेजुलर') फॉर्मेट ('svg'); फ़ॉन्ट-वजन: सामान्य; फ़ॉन्ट-शैली: सामान्य;रंग कार्यों के साथ शरीर को स्टाइल करना
अब, हम एक पृष्ठभूमि रंग देंगे
तन(कि रंग आधार से हल्का होना चाहिए) और साथ ही फ़ॉन्ट परिवार और फ़ॉन्ट आकार निर्दिष्ट करना। हम रंग कार्यों का उपयोग करते हुए प्रभाव से संपर्क कर सकते हैं:निम्न कोड 30% पर पृष्ठभूमि को हल्का करेगा.
बॉडी बैकग्राउंड: लाइटेन (@theme, 30%); फ़ॉन्ट-परिवार: असैपरेगुलर, संस-सेरिफ़; फ़ॉन्ट-आकार: 11pt;
नेस्टेड नियम के साथ नेविगेशन को स्टाइल करना
LESS में हम सीधे उसके अभिभावक की शैलियों को घोंसला बनाने में सक्षम हैं। आइए नीचे दिए गए कोड पर एक नज़र डालें.
एनएवीटैग जिसमें नेविगेशन के लिए सभी आवश्यक तत्व शामिल हैं, निम्नलिखित शैलियों को दिया जाएगा.नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; .border; ।साया;ध्यान दें कि, सीएसएस नियमों का एक गुच्छा फिर से देने के बजाय, मैंने केवल डाला
.सीमासीमा शैली और देने के लिए.सायाछाया जोड़ने के लिए। वास्तविक मामलों में, कक्षाओं के इन सेटों को किसी अन्य तत्व में भी उपयोग किया जा सकता है, जहाँ भी इसकी आवश्यकता हो.
इसके बाद, हम शैलियों के लिए दे
उलके अंदरएनएवीशून्य पैडिंग और मार्जिन के लिए। ऐसा नहीं है कि कुछ समय पहले हम शैली को कुछ इस तरह लिखेंगे:नौसेना … नौसेना उल …इस दृष्टिकोण में कुछ भी गलत नहीं है, वास्तव में, मैं इसे हर बार करता था और इसके साथ बहुत सहज हूं। हालांकि, इस पद्धति, कई सीएसएस डिजाइनर ने कहा है, क्रियाशील है और कुछ मामलों में, आसानी से प्रबंधनीय नहीं है.
अब, हम ऐसा कुछ कर सकते हैं:
नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; .border; ।साया; उल पैडिंग: 0; मार्जिन: 0;
और फिर मेनू का उपयोग करके एक पंक्ति में प्रदर्शित किया जाएगा
प्रदर्शन: इनलाइनसंपत्ति.नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; .border; ।साया; उल पैडिंग: 0; मार्जिन: 0; ली प्रदर्शन: इनलाइन;
नीचे सिंटैक्स में हम मेनू एंकर टैग शैली निर्दिष्ट करते हैं और अपनी पूर्वनिर्धारित शैली जोड़ते हैं, वे हैं:
.लिखावट का रंग,.विभक्त,.ढाल.नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; .border; ।साया; उल पैडिंग: 0; मार्जिन: 0; ली प्रदर्शन: इनलाइन; पाठ-सजावट: कोई नहीं; प्रदर्शन: इनलाइन-ब्लॉक; बाईंओर तैरना; चौड़ाई: 156 पीएक्स; ऊंचाई: 45 पीएक्स; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 300%; .textcolor (# f2f2f2); // आप इस लाइन को बदल सकते हैं। डिवाइडर; .gradient;ऊपर दिए गए कोड में हम हेक्स रंग लागू करते हैं
# f2f2f2जिसमें प्रकाश 50% से ऊपर माना जाता है, इसलिए हम छाया को अंधेरा (स्वचालित रूप से) होने की उम्मीद करेंगे। बाकी कोड मुझे यकीन है कि काफी आत्म-व्याख्यात्मक है.
हालाँकि, यदि हम ऊपर दिए गए वर्तमान परिणाम को देखते हैं, तो प्रत्येक मेनू में डिवाइडर होते हैं जिसके परिणामस्वरूप अंतिम खंड नीचे की ओर बह जाता है। इसलिए हमें नेविगेशन बार के पहले और अंतिम बच्चे के लिए सीमा शैली को छोड़ना होगा.
नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; .border; ।साया; उल पैडिंग: 0; मार्जिन: 0; ली प्रदर्शन: इनलाइन; पाठ-सजावट: कोई नहीं; प्रदर्शन: इनलाइन-ब्लॉक; बाईंओर तैरना; चौड़ाई: 156 पीएक्स; ऊंचाई: 45 पीएक्स; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 300%; .textcolor (# f2f2f2); // आप इस लाइन को बदल सकते हैं। डिवाइडर; .gradient; ली: पहला-बच्चा एक सीमा-वाम: कोई नहीं; ली: अंतिम बच्चे एक सीमा-अधिकार: कोई नहीं;
होवर स्टेट
अंतिम चरण के लिए हम होवर प्रभाव जोड़ेंगे। LESS में हम जोड़ सकते हैं
छद्म तत्वजैसे कि: मंडरानाका उपयोग करते हुएऔरप्रतीक.नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; .border; ।साया; उल पैडिंग: 0; मार्जिन: 0; ली प्रदर्शन: इनलाइन; पाठ-सजावट: कोई नहीं; प्रदर्शन: इनलाइन-ब्लॉक; बाईंओर तैरना; चौड़ाई: 156 पीएक्स; ऊंचाई: 45 पीएक्स; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 300%; .textcolor (# f2f2f2); // आप इस लाइन को बदल सकते हैं। डिवाइडर; .gradient; &: hover ! li: पहला-बच्चा एक सीमा-वाम: कोई नहीं; ली: अंतिम बच्चे एक सीमा-अधिकार: कोई नहीं;
रंग विषय बदलें
यहाँ LESS का ठंडा हिस्सा है। अगर हम समग्र रंग विषय को बदलना चाहते हैं, तो हम इसे शुद्ध सीएसएस में कम से कम लाइन परिवर्तन में कर सकते हैं जो हमें शुद्ध सीएसएस में चाहिए.
इस मामले में, मैं थोड़ा हल्का होने के लिए नेविगेशन रंग बदल दूंगा। बस निम्नलिखित दो पंक्तियों को बदलें.
@theme: #ccc; //इसे बदलो.textcolor (# 555); //और इसऔर यहाँ परिणाम है.
CSS में कम संकलन करें
जब हम अभी भी LESS जावास्क्रिप्ट का उपयोग कर रहे हैं, तो यह पकड़ लेगा
.कम सेफ़ाइल और इसे स्थिर सीएसएस में अनुवाद करें ताकि मानक ब्राउज़र इसकी व्याख्या कर सके। यह क्लाइंट पक्ष में एक दोहरा काम है, निरर्थक और अपशिष्ट बैंडविड्थ का उल्लेख नहीं करना। LESS का मुख्य बिंदु स्थिर सीएसएस को अधिक गतिशील और प्रोग्राम योग्य बनाने के लिए हमारे अभ्यास को सरल बनाने के लिए वर्कफ़्लो में है.इसलिए, जब हम नेविगेशन बार को वेबसाइट पर लाइव करने वाले हैं, तो LESS फाइल को स्टेटिक CSS में संकलित करना महत्वपूर्ण है.
दबाएं इसे क्रंच करें! बड़ा बटन.
हमारे अभ्यास फ़ाइल में .less को सहेजें, इसे HTML दस्तावेज़ से लिंक करें और अनलिंक करें
.कम सेऔरless.jsदस्तावेज़ से फ़ाइल..छाया बॉक्स-छाया: 0 1px 2px 0 # 555555; । विभक्त सीमा-शैली: ठोस; सीमा-चौड़ाई: 0 1px 0 1px; बॉर्डर-रंग: पारदर्शी # 444444 पारदर्शी # 888888; .ग्रेडिएंट बैकग्राउंड: लीनियर-ग्रेडिएंट (टॉप, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%); .हॉवरएफ़ेक्ट पृष्ठभूमि: रैखिक-ढाल (शीर्ष, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%); @ फॉन्ट-फेस फॉन्ट-परिवार: 'AsapRegular'; src: url ('फोंट / असैप-रेगुलर-वेबफोंट.ऑट'); src: url ('फ़ॉन्ट्स / Asap-Regular-webfont.eot? #iefix') प्रारूप ('एम्बेडेड- opentype'), url ('फ़ॉन्ट / Asap-Regular-webfont.woff') प्रारूप ('woff'), url ('फोंट / असैप-रेग्युलर-वेबफॉन्ट.फट') फॉर्मेट ('ट्रेटाइप'), यूआरएल ('फोंट / असैप-रेगुलर-वेबफॉन्ट.सर्व # असैप्रेजुलर') फॉर्मेट ('svg'); फ़ॉन्ट-वजन: सामान्य; फ़ॉन्ट-शैली: सामान्य; शरीर पृष्ठभूमि: # a2a2a2; फ़ॉन्ट-परिवार: असैपरेगुलर, संस-सेरिफ़; फ़ॉन्ट-आकार: 11pt; नौसेना मार्जिन: 50 पीएक्स ऑटो 0; चौड़ाई: 788px; ऊंचाई: 45 पीएक्स; सीमा-त्रिज्या: 3 पीएक्स; सीमा: 1px ठोस # 505050; बॉक्स-छाया: 0 1px 2px 0 # 555555; नौसेना उल गद्दी: 0; मार्जिन: 0; nav ul li प्रदर्शन: इनलाइन; nav ul li a टेक्स्ट-डेकोरेशन: कोई नहीं; प्रदर्शन: इनलाइन-ब्लॉक; बाईंओर तैरना; चौड़ाई: 156 पीएक्स; ऊंचाई: 45 पीएक्स; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 300%; रंग: # f2f2f2; पाठ-छाया: 1px 1px 0px # 000000; सीमा-शैली: ठोस; सीमा-चौड़ाई: 0 1px 0 1px; बॉर्डर-रंग: पारदर्शी # 444444 पारदर्शी # 888888; पृष्ठभूमि: रैखिक-ढाल (शीर्ष, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%); nav ul li a: hover बैकग्राउंड: लीनियर-ग्रेडिएंट (टॉप, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%); nav ul li: पहला-बच्चा a बॉर्डर-लेफ्ट: कोई नहीं; नेवी उल ली: लास्ट-चाइल्ड ए बॉर्डर-राइट: कोई नहीं;आइए एक बार फिर से परिणाम पर एक नज़र डालें.
और हम कर रहे हैं, इसके साथ प्रयोग करने के लिए स्वतंत्र महसूस कृपया.
निष्कर्ष
हमने आज LESS भाषा के बारे में कई बातें सीखी हैं, जैसे:
- चर.
- mixins
- पैरामीट्रिक मिश्रण
- संचालन
- संरक्षित मिश्रण
- और नेस्टेड नियम
यद्यपि कई चीजें हैं जिन्हें आगे कवर किया जा सकता है और कई संभावनाओं को दिखाया और समझाया जा सकता है, हमें उम्मीद है कि आपने इस मूल ट्यूटोरियल का आनंद लिया है.
- डेमो
- स्रोत डाउनलोड करें
