कम (स्टाइल शीट भाषा): Difference between revisions

From Vigyanwiki
No edit summary
Line 224: Line 224:
[[Category: Machine Translated Page]]
[[Category: Machine Translated Page]]
[[Category:Created On 16/06/2023]]
[[Category:Created On 16/06/2023]]
[[Category:Vigyan Ready]]

Revision as of 14:16, 1 July 2023

Less
LESS Logo.svg
द्वारा डिज़ाइन किया गयाAlexis Sellier
DeveloperAlexis Sellier, Dmitry Fadeyev
पहली प्रस्तुतिScript error: The module returned a nil value. It is supposed to return an export table.; Error: first parameter cannot be parsed as a date or time. (Script error: The module returned a nil value. It is supposed to return an export table.)
Stable release
Script error: The module returned a nil value. It is supposed to return an export table. / Script error: The module returned a nil value. It is supposed to return an export table.; Error: first parameter cannot be parsed as a date or time. (Script error: The module returned a nil value. It is supposed to return an export table.)
टाइपिंग अनुशासनDynamic
कार्यान्वयन भाषाJavaScript
ओएसCross-platform
लाइसेंसApache License 2.0
फ़ाइल नाम एक्सटेंशनएस.less
वेबसाइटlesscss.org
Influenced by
CSS, Sass
Influenced
Sass, Less Framework, Bootstrap (v3)

लेस (लीनर स्टाइल शीट; कभी-कभी लेस के रूप में शैलीबद्ध) गतिशील प्रीप्रोसेसर स्टाइल शीट भाषा है जिसे कैस्केडिंग स्टाइल शीट्स (सीएसएस) में संकलित किया जा सकता है और क्लाइंट साइड या सर्वर साइड पर चलाया जा सकता है।[1] एलेक्सिस सेलियर द्वारा डिज़ाइन किया गया, लेस सैस (स्टाइलशीट भाषा) से प्रभावित है और इसने सैस के नए एससीएसएस सिंटैक्स को प्रभावित किया है, जिसने इसके सीएसएस-जैसे ब्लॉक फ़ॉर्मेटिंग सिंटैक्स को अनुकूलित किया है।[2] लेस ओपन सोर्स प्रोजेक्ट है। इसका पहला संस्करण रूबी (प्रोग्रामिंग भाषा) में लिखा गया था; चूँकि, बाद के संस्करणों में, रूबी का उपयोग बहिष्कृत कर दिया गया है और जावास्क्रिप्ट द्वारा प्रतिस्थापित किया गया है। लेस का इंडेंट सिंटैक्स मेटलंग्वेज या नेस्टेड है, क्योंकि वैध सीएसएस प्रोग्रामिंग भाषाओं के समान शब्दार्थ के साथ वैध लेस कोड है। लेस निम्नलिखित तंत्र प्रदान करता है: चर (प्रोग्रामिंग), नेस्टिंग (कंप्यूटिंग) प्रोग्रामिंग में, मिश्रण, ऑपरेटर (प्रोग्रामिंग) और फ़ंक्शन (कंप्यूटर विज्ञान); लेस और अन्य सीएसएस प्रीकंपाइलर के बीच मुख्य अंतर यह है कि लेस ब्राउज़र द्वारा लेस.जेएस के माध्यम से रीयल-टाइम संकलन की अनुमति देता है।[1][3]

सुविधाएँ

चर

लेस चर को परिभाषित करने की अनुमति देता है। लेस में वेरिएबल्स को चिह्न (@) के साथ परिभाषित किया गया है। वेरिएबल असाइनमेंट (कंप्यूटर प्रोग्रामिंग) कोलन (विराम चिह्न) (:) के साथ किया जाता है।

अनुवाद के समय चर के मान आउटपुट सीएसएस दस्तावेज़ में प्रसारित किये जाते हैं।[1] 

@pale-green-color: #4D926F;

#header {
  color: @pale-green-color;
}
h2 {
  color: @pale-green-color;
}

उपरोक्त कोड लेस में निम्नलिखित सीएसएस कोड को संकलित करेगा। 

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}


मिश्रण

मिक्सिन्स वर्ग के सभी गुणों को अपनी संपत्ति में से के रूप में वर्ग नाम सहित किसी अन्य वर्ग में एम्बेड करने की अनुमति देता है, इस प्रकार प्रकार का कॉन्स्टेंट (प्रोग्रामिंग) या चर के रूप में व्यवहार करता है। वे कार्यों की तरह भी व्यवहार कर सकते हैं और तर्क ले सकते हैं। सीएसएस मिक्सिन्स का समर्थन नहीं करता है: किसी भी दोहराए गए कोड को प्रत्येक स्थान पर दोहराया जाना चाहिए। मिक्सिन्स अधिक कुशल और स्वच्छ कोड दोहराव के साथ-साथ कोड के आसान परिवर्तन की अनुमति देता है।[1] 

.rounded-corners (@radius: 5px 10px 8px 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px 25px 35px 0px);
}

उपरोक्त कोड लेस में निम्नलिखित सीएसएस कोड को संकलित करेगा: 

#header {
  -webkit-border-radius: 5px 10px 8px 2px;
  -moz-border-radius: 5px 10px 8px 2px;
  border-radius: 5px 10px 8px 2px;
}
#footer {
  -webkit-border-radius: 10px 25px 35px 0px;
  -moz-border-radius: 10px 25px 35px 0px;
  border-radius: 10px 25px 35px 0px;
}

लेस में विशेष प्रकार का नियम सेट होता है जिसे पैरामीट्रिक मिक्सिन्स कहा जाता है जिसे समान वर्गों में मिलाया जा सकता है, किंतु मापदंडों को स्वीकार करता है। 

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 16px;
    a {
      text-decoration: none;
      color: red;
      &:hover {
        border-width: 1px;
        color: #fff;
      }
    }
  }
}

उपरोक्त कोड लेस में निम्नलिखित सीएसएस कोड को संकलित करेगा: 

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 16px;
}
#header p a {
  text-decoration: none;
  color: red;
}
#header p a:hover {
  border-width: 1px;
  color: #fff;
}


कार्य और संचालन

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

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 3;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

उपरोक्त कोड लेस में निम्नलिखित सीएसएस कोड को संकलित करेगा: 

#header {
  color: #333;
  border-left: 1px;
  border-right: 3px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}


तुलना

सास

सैस (स्टाइलशीट भाषा) और लेस दोनों सीएसएस प्रीप्रोसेसर हैं, जो स्थिर नियमों के अतिरिक्त प्रोग्रामिंग निर्माण में स्वच्छ सीएसएस लिखने की अनुमति देते हैं।[4]

लेस सास से प्रेरित है।[5][2] सैस को सीएसएस को सरल और विस्तारित दोनों करने के लिए डिज़ाइन किया गया था इसलिए घुंघराले ब्रेसिज़ जैसी चीज़ों को सिंटैक्स से हटा दिया गया था। लेस को यथासंभव सीएसएस के समीप होने के लिए डिजाइन किया गया था, और इसके परिणामस्वरूप उपस्थित सीएसएस को वैध लेस कोड के रूप में उपयोग किया जा सकता है।[6]

सैस के नए संस्करणों ने एससीएसएस (सैसी सीएसएस) नामक सीएसएस-जैसी सिंटैक्स भी प्रस्तुत किया जाता है।

साइटों पर प्रयोग करें

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

एक अन्य विकल्प लेस कोड को शुद्ध सीएसएस में प्रस्तुत करना और सीएसएस को साइट पर अपलोड करना है। इस विकल्प के साथ कोई .लेस फ़ाइलें अपलोड नहीं की जाती हैं और साइट को लेस.जेएस जावास्क्रिप्ट कन्वर्टर की आवश्यकता नहीं होती है।

लेस सॉफ्टवेयर

नाम विवरण सॉफ़्टवेयर लाइसेंस प्लैटफ़ॉर्म कार्यक्षमता
विन्लेस- लेस .जेएस के लिए विंडोज़ जीयूआई जीयूआई लेस कंपाइलर अपाचे 2.0[7] विंडोज कंपाइलर
क्रंच लेस संपादक और कंपाइलर (एडोब एआईआर की आवश्यकता है) जीपीएल[8] विंडोज, मैक ओएस एक्स कंपाइलर
एडिटर
लेस .जेएस-विंडोज़ विंडोज़ के लिए सरल कमांड-लाइन उपयोगिता जो लेस .जेएस का उपयोग करके *.लेस फ़ाइलों को सीएसएस में संकलित करेगी। एमआईटी लाइसेंस[9] विंडोज कंपाइलर
लेस.एप्प कम कंपाइलर स्वामित्व मैक ओएस एक्स कंपाइलर
कोडकिट लेस कंपाइलर स्वामित्व मैक ओएस एक्स कंपाइलर
लेसइंजन लेस कंपाइलर मुक्त ओपनकार्ट प्लगइन कंपाइलर
सिम्प्लेस लेस कंपाइलर निःशुल्क परंतु कोई स्पष्ट लाइसेंस नहीं[10] विंडोज
मैक ओएस एक्स
लिनक्स		 कंपाइलर
चिरपी लेस कंपाइलर एमएस-पीएल[11] विजुअल स्टूडियो प्लगइन कंपाइलर
माइंडस्केप वेब कार्यक्षेत्र लेस और सैस के लिए सिंटैक्स हाइलाइटिंग और इंटेलीसेन्स स्वामित्व विजुअल स्टूडियो प्लगइन कम्पायलर

वाक्य - विन्यास पर प्रकाश डालना

लेस में एक्लिप्स प्लगइन एक्लिप्स प्लगइन ईपीएल1.0[12] एक्लिप्स प्लगइन वाक्य - विन्यास पर प्रकाश डालना

सामग्री सहायता

कम्पायलर

मॉड_लेस अपाचे2 मॉड्यूल तुरंत कम संकलित करने के लिए विवर्त स्त्रोत लिनक्स कंपाइलर
ग्रन्ट-योगदान-रहित नोड.जेएस ग्रंट कार्य लेस को CSS में परिवर्तित करने के लिए एमआईटी[13] नोड.जेएस कंपाइलर
वेब अनिवार्यताएँ लेस और सैस के समर्थन के साथ विजुअल स्टूडियो एक्सटेंशन अपाचे 2.0 [14] विंडोज सिंटेक्स हाइलाइटिंग, कंटेंट असिस्ट, कंपाइलर
क्लेस्स्क शुद्ध C++ कंपाइलर एमआईटी[15] कम से कम विंडोज़, लिनक्स, मैकओएस कंपाइलर
लेस वेबकंपाइलर वेब-आधारित कंपाइलर एमआईटी[16] कम से कम विंडोज़, लिनक्स, मैकओएस कंपाइलर, सिंटेक्स हाइलाइटिंग, मिनिफायर


यह भी देखें

संदर्भ

  1. ↑ 1.0 1.1 1.2 1.3 The Core Less Team. "Getting started | Less.js". Less.js. Retrieved 2021-03-19.
  2. ↑ 2.0 2.1 Weizenbaum, Nathan (2009-06-17). "Sass and Less : Nex3". Archived from the original on 2009-06-21. Retrieved 2021-03-19.
  3. ↑ Meng, Jiew (2010-12-14). Mortensen, Peter (ed.). "css - Is there a SASS.js? Something like LESS.js?". Stack Overflow. Retrieved 2021-03-19.
  4. ↑ Atwood, Jeff (2010-04-30). "सीएसएस में क्या गलत है". Coding Horror. Retrieved 2022-12-03.
  5. ↑ The Core Less Team. "About | Less.js". Less.js. Retrieved 2021-03-19.
  6. ↑ Eppstein, Chris (2010-11-10). "sass_and_less_compared.markdown". GitHub Gist. Retrieved 2021-03-19.
  7. ↑ Lagendijk, Mark (2013-01-29). "License Information · Issue #55 · marklagendijk/WinLess". GitHub. Retrieved 2021-03-19.
  8. ↑ Dean, Matthew (2011-12-02). "Crunch/LICENSE.txt at master · matthew-dean/Crunch". GitHub. Retrieved 2021-03-19.
  9. ↑ Smart, Duncan (2013-07-25). "less.js-windows/LICENSE at master · duncansmart/less.js-windows". GitHub. Retrieved 2021-03-19.
  10. ↑ Engel, Christian (2012-07-29). "SimpLESS/LICENSE.txt at master · Paratron/SimpLESS". GitHub. Retrieved 2021-03-19.
  11. ↑ Evan Nagle. "Chirpy - VS Add In For Handling Js, Css, DotLess, and T4 Files - CodePlex Archive". CodePlex. Archived from the original on 2021-02-20. Retrieved 2021-03-19.
  12. ↑ Vincent Simonet. "Eclipse plugin for LESS". normalesup.org. Retrieved 2021-03-19.
  13. ↑ Kellen, Tyler (2012-09-04). "grunt-contrib-less/LICENSE-MIT at master · gruntjs/grunt-contrib-less". GitHub. Retrieved 2021-03-19.
  14. ↑ Kristensen, Mads (2014-06-18). "WebEssentials2013/LICENSE.txt at master · madskristensen/WebEssentials2013". GitHub. Retrieved 2021-03-19.
  15. ↑ Bram van der Kroef (2017-07-11). "clessc/LICENSE at master · BramvdKroef/clessc". GitHub. Retrieved 2021-03-19.
  16. ↑ SamBrishes (2018-12-15). "snout.less/LICENSE.md at master · pytesNET/snout.less". GitHub. Retrieved 2021-03-19.


बाहरी संबंध

Retrieved from ‘https://www.vigyanwiki.in/index.php?title=कम_(स्टाइल_शीट_भाषा)&oldid=203294’