LESS CSS प्रीप्रोसेसर और रेल्स पर रूबी के साथ इसका एकीकरण

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



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

यह सरल सीएसएस संरचना शुरुआती लोगों के लिए इसे सुलभ बनाती है, लेकिन एक ही समय में कुछ सीमाएं लगाती है। उदाहरण के लिए, चर का उपयोग करना असंभव है, और इसलिए दोहराया कोड के अनुभाग अपरिहार्य हैं। जो DRY के सिद्धांतों का खंडन करता है (अपने आप को दोहराएं नहीं - शाब्दिक रूप से, "खुद को दोहराएं नहीं")।

LESS CSS प्रीप्रोसेसर क्या है और यह हमें क्लासिक CSS कोड की खामियों को कैसे दरकिनार करेगा? लेस सीएसएस की बुनियादी क्षमताओं का विस्तार करता है - आपको चर और गणना का उपयोग करने की अनुमति देता है, ओओपी के कुछ सिद्धांतों को जोड़ता है और आपको सीएसएस नियमों की संरचना को और अधिक स्पष्ट करने की अनुमति देता है।

यह कैसे काम करता है?

स्टाइल शीट के साथ एक सीएसएस फ़ाइल के बजाय, हम एक कम फ़ाइल के साथ काम करते हैं। यानी अलग से "style.css" छोड़ें और "style.less" खोलें, जो डिफ़ॉल्ट रूप से आपकी सीएसएस-फाइलों के समान फ़ोल्डर में होना चाहिए। आपको HTML दस्तावेज़ में कुछ भी बदलने की आवश्यकता नहीं है।

इससे पहले कि वेब सर्वर साइट "styl.css" पर आगंतुक को दे देगा - LESS इसे "स्टाइल.लेस" से संकलित के साथ बदल देगा - और उपयोगकर्ता को सभी नियमों के अनुसार एक मानक सीएसएस स्टाइल शीट लिखी जाएगी।

रेल 3 पर रूबी के लिए स्थापना

इस तरह की परियोजनाओं में एकीकरण के लिए LESS संकलक रूबी , PHP , .NET , OS X अनुप्रयोग पर रूबी के रूप में उपलब्ध है। जेएस में एक संस्करण भी लिखा गया है । हम केवल रेल 3 पर रूबी के तहत स्थापित करने पर विचार करेंगे। यह अत्यंत सरल है। सबसे पहले, माणिक रत्न स्थापित करें:

मणि कम स्थापित करें

फिर रेल प्लगइन:

रेल प्लग इन स्थापित git: //github.com/cloudhead/more.git

यदि आपकी सीएसएस-फाइलें डिफ़ॉल्ट फ़ोल्डर "सार्वजनिक / स्टाइलशीट /" में संग्रहीत नहीं हैं, तो अपने पथ को "config / environment.rb" में लिखें, यह मेरे लिए इस तरह दिखता है:

कम :: More.source_path = "सार्वजनिक / सीएसएस"
कम :: More.destination_path = "css"

वह मूल रूप से यह है।

चर

चरों का उपयोग करने से आप विकास को काफी सरल बना सकते हैं। उदाहरण के लिए, रंगों के साथ काम करने के मामले में:

@ प्रकाश-पृष्ठभूमि-रंग: # cfdae1;

# मेनू a: होवर {color: @ light-background-color; }
# भूत {पृष्ठभूमि: @ प्रकाश-पृष्ठभूमि-रंग; }

ऑपरेटरों

उदाहरण के लिए LESS में कोई भी अंकगणित चर पर किया जा सकता है:

@ आधार-मार्जिन: 25 पीएक्स;
# हेडर {मार्जिन-टॉप: @ बेस-मार्जिन + 10 पीएक्स; }

या यहां तक ​​कि रंगों के रंगों को जल्दी से बदल सकते हैं:

@ प्रकाश-पृष्ठभूमि-रंग: # cfdae1;
@ डार्क-बैकग्राउंड-कलर: @ लाइट-बैकग्राउंड-कलर - # 333;

कक्षाएं

उदाहरण के लिए, हम एक गोल-कोनों वर्ग को परिभाषित कर सकते हैं जो गोल कोनों के लिए जिम्मेदार होगा:

घिरे हुए कोने ( त्रिज्या ) {
-वेबकिट-बॉर्डर-रेडियस: त्रिज्या ;
-मोज़-बॉर्डर-रेडियस: त्रिज्या ;
सीमा-त्रिज्या: त्रिज्या ;
}

और इसे किसी भी चयनकर्ता के अंदर उपयोग करें:

# लॉगिन-बॉक्स {
घिरा हुआ कोनों (5 पीएक्स);
}

संरचना

मानक कोड जो वर्णन करता है, उदाहरण के लिए, सीएसएस में साइट मेनू इस तरह दिख सकता है:

# सुंदर {}
# किडर # ननव {}
# खीर # नान उल {}
# खीर # नान उल ली {}
#header #nav ul li a {}

LESS आपको अन्य नियमों के अंदर नियमों को रखने की अनुमति देता है, इसलिए आप उपरोक्त कोड अनुभाग को और अधिक सुंदर और तार्किक रूप से फिर से लिख सकते हैं:

# जयधर {
#nav {
उल {
ली {
{{}
}
}
}
}

और यहां हम मानक लिंक शैलियों का वर्णन कर सकते हैं:

{{
और: होवर {}
सक्रिय: {}
&: {} का दौरा किया
}

छू मंतर हो गया

आप "आयात" फ़ंक्शन के साथ दूसरों को मुख्य कम-फ़ाइल से कनेक्ट कर सकते हैं:

आयात 'टाइपोग्राफी';
आयात 'प्रिंट';

और कोड में कुछ स्लैश के बाद टिप्पणी करें:

#ेंड {}
// आपके ध्यान के लिए धन्यवाद
// मुझे आशा है कि विषय आपके हित में होगा

इस लेख को लिखने में हमारी मदद करने के लिए वेम्बो हैंडबुक का धन्यवाद।