पुराने CSS को LESS में कैसे कन्वर्ट करें
हमने अपनी पिछली पोस्ट्स में LESS के लिए बहुत सारी मूल बातें कवर की हैं। यदि आप हमारी LESS श्रृंखला का अनुसरण कर रहे हैं, तो हमारा मानना है कि इस बिंदु पर आपको पहले से ही एक अच्छा विचार है कि कैसे उपयोग करना है चर, mixins तथा ऑपरेशन कम में.
हमने यह भी उल्लेख किया है कि ऐप के साथ या कंपाइलर के साथ LESS को नियमित सीएसएस में कैसे बदला जाए। लेकिन, हम इसके विपरीत कैसे करते हैं; सीएसएस को कम में बदलने के लिए? खैर, यह टिप आपके लिए है.
एक उपकरण का उपयोग करना
की बढ़ती लोकप्रियता के साथ सीएसएस प्रीप्रोसेसर, कुछ नए टूल और ऐप्स जो अनिवार्य रूप से वेब डिज़ाइनर या डेवलपर के जीवन को आसान बनाने का लक्ष्य रखते हैं, जैसे कि यह टूल: CSS2Less.
यह उपकरण हमें नियमित CSS को LESS में बदलने की अनुमति देता है। तो, चलो यह एक कोशिश दे। मेरी पुरानी फ़ाइल से निम्नलिखित सीएसएस नियम परिवर्तित किए जाने हैं.
नौसेना ऊंचाई: 40 पीएक्स; चौड़ाई: 100%; पृष्ठभूमि: # 000; बॉर्डर-बॉटम: 2px ठोस #fff; नौसेना उल गद्दी: 0; मार्जिन: 0 ऑटो; nav li प्रदर्शन: इनलाइन; बाईंओर तैरना; नेवी a color: #fff; प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 100px; पाठ-छाया: 1px 1px 0px # 000; nav li a बॉर्डर-राइट: 1px सॉलिड #fff; बॉक्स-आकार: सीमा बॉक्स; नेवी ली: आखिरी बच्चे एक बॉर्डर-राइट: 0; nav a: hover, nav a: active background-color: #fff;
यहाँ परिणाम है.
nav a: hover, nav a: active background-color: #fff; नौसेना ऊंचाई: 40 पीएक्स; चौड़ाई: 100%; पृष्ठभूमि: # 000; बॉर्डर-बॉटम: 2px ठोस #fff; a color: #fff; प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 100px; पाठ-छाया: 1px 1px 0px # 000; उल गद्दी: 0; मार्जिन: 0 ऑटो; ली: अंतिम बच्चे एक सीमा-दाएं: 0; ली प्रदर्शन: इनलाइन; बाईंओर तैरना; a बॉर्डर-राइट: 1px सॉलिड #fff; बॉक्स-आकार: सीमा बॉक्स;
जैसा कि हम ऊपर देख सकते हैं, हमारा पुराना CSS अब LESS की तरह नेस्टेड है.
सीमा
हालाँकि हम रूपांतरण के परिणामों में कुछ सीमाएँ भी देख सकते हैं। पुराने सीएसएस में, हमारे पास कई समान रंग हैं, जैसे कि इन दो घोषणाओं में बॉर्डर-बॉटम: 2px ठोस #fff; तथा बॉर्डर-राइट: 1px ठोस #fff; हम दोनों सीमाओं सफेद में है। LESS में हम वास्तव में इस स्थिर मान को स्टोर कर सकते हैं परिवर्तनशील.
यह घोंसला भी नहीं बनाता और अलग हो जाता है छद्म * एक एम्परसेंड (और) प्रतीक के साथ, जैसे कि निम्नलिखित नियमों में ली: पिछले वाले बच्चे तथा nav a: hover, nav a: active. वे बस वैसे ही बने रहते हैं जैसे हम वास्तव में नियमों को सरल बना सकते हैं;
ली और: पहला-बच्चा एक &: होवर और: सक्रिय
निष्कर्ष
सीमाओं के बावजूद यह वर्तमान में अभी भी है, यह उपकरण CSS नियमों को घोंसले के शिकार करने के लिए हमारे समय को बचाने में काफी मददगार है। हमें केवल बाकी को मैन्युअल रूप से करने की आवश्यकता है; संभवत: ऊपर की सीमाएँ हैं संकल्प लिया.
